Frage Wie skaliere ich ein Bild automatisch so, dass es in einen Div-Container passt?


Wie skaliert man automatisch ein großes Bild, so dass es in einen div-Container mit kleinerer Breite passt, während das Breite / Höhe-Verhältnis beibehalten wird?


Beispiel: stackoverflow.com - Wenn ein Bild in das Editorfenster eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird das Bild automatisch skaliert.


1078
2018-06-12 17:00


Ursprung


Antworten:


Wenden Sie keine explizite Breite oder Höhe auf das Image-Tag an. Gib es stattdessen:

max-width:100%;
max-height:100%;

Ebenfalls, height: auto; wenn Sie nur eine Breite angeben möchten.

Beispiel: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


1436
2018-06-12 17:03



https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun.

<img style='height: 100%; width: 100%; object-fit: contain'/> 

wird die Arbeit machen. Es ist CSS3 Zeug.

Geige: http://jsfiddle.net/mbHB4/7364/


237
2018-06-12 02:48



Gegenwärtig gibt es keine Möglichkeit, dies mit Bildern fester Größe wie JPEGs oder PNG-Dateien auf deterministische Weise korrekt zu tun.

Um ein Bild proportional zu skalieren, müssen Sie festlegen entweder die Höhe oder Breite zu "100%", aber nicht beides. Wenn Sie beide auf "100%" einstellen, wird Ihr Bild gestreckt.

Die Auswahl von Höhe oder Breite hängt von der Größe des Bildes und des Containers ab:

  1. Wenn Ihr Bild und Ihr Container sowohl "porträtförmig" als auch "landschaftlich" sind (größer als breit oder breiter als hoch), ist es egal, welche Höhe oder Breite "% 100" ist. .
  2. Wenn es sich bei Ihrem Bild um ein Porträt handelt und Ihr Container eine Landschaft ist, müssen Sie festlegen height="100%" auf dem Bild.
  3. Wenn es sich bei Ihrem Bild um eine Landschaft handelt und Ihr Container ein Hochformat ist, müssen Sie festlegen width="100%" auf dem Bild.

Wenn es sich bei Ihrem Bild um ein SVG handelt, bei dem es sich um ein Vektorformat mit variabler Größe handelt, können Sie die Erweiterung automatisch an den Container anpassen.

Sie müssen nur sicherstellen, dass die SVG-Datei keine dieser Eigenschaften in der <svg> Etikett:

height
width
viewbox

Die meisten Vektorzeichnungsprogramme werden diese Eigenschaften beim Exportieren einer SVG-Datei festlegen. Daher müssen Sie Ihre Datei bei jedem Export manuell bearbeiten oder ein Skript dafür schreiben.


93
2018-06-11 20:13



Hier ist eine Lösung, die Ihren img innerhalb eines divs ohne Dehnung sowohl vertikal als auch horizontal ausrichtet, auch wenn das Bild zu klein oder zu groß ist, um in das div zu passen. Der html:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Das CSS:

#myDiv 
{
  height:104px;
  width:140px;
}
#myDiv img
{
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;
}

Die JQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Ich hoffe, dass dir das hilft


65
2017-10-04 09:40



Mach es einfach!

Gib dem Behälter a Fest  height und dann für die img Etikett innerhalb des Sets width und max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Der Unterschied besteht darin, dass Sie den Wert festlegen width 100% nicht sein max-width.


37
2017-09-25 08:45



Schau dir meine Lösung an: http://codepen.io/petethepig/pen/dvFsA

Es ist in reinem CSS ohne JS-Code geschrieben. Es kann Bilder beliebiger Größe und Ausrichtung verarbeiten.

Gegeben solch ein HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS-Code wäre:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

19
2018-06-28 18:26



Sie können das Bild als Hintergrund für ein div festlegen und dann das Symbol verwenden css Hintergrundgröße Eigenschaft 

background-size: cover;

und es wird "Skalieren Sie das Hintergrundbild so groß wie möglich, so dass der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird. Einige Teile des Hintergrundbilds sind möglicherweise nicht im Hintergrundpositionierungsbereich sichtbar" -w3schools.com


17
2017-12-16 12:37



Ein schöner Hack.

Sie haben zwei Möglichkeiten, das Bild ansprechbar zu machen.

  1. Wenn ein Bild ein Hintergrundbild ist.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Starte es Hier


Aber sollte man verwenden img Tag, um Bilder so zu platzieren, wie es besser ist als background-image bezüglich SEO wie du schreiben kannst Stichwort in dem alt des img Etikett. Also hier können Sie das Bild reagieren lassen.

  1. Wenn das Bild in ist img Etikett.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Starte es Hier


12
2018-02-21 07:45



Diese Lösung streckt das Bild nicht und füllt den gesamten Container, aber es schneidet einen Teil des Bildes.

html

 <div><img src="/images/image.png"></div>

CSS

div {
  width: 100%;
  height: 10em;
  overflow: hidden;

img {
  min-width: 100%;
  min-height: 100%;

}

9
2017-08-07 11:54



Ich habe gerade ein jQuery-Plugin veröffentlicht, das genau das tut, was Sie brauchen, mit vielen Optionen:

https://github.com/GestiXi/image-scale

Verwendung:

HTML

<div class="image-container">
  <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JS

$(function() {
  $("img.scale").imageScale();
});

8
2017-08-06 15:31