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

Wie Sie die automatische Größenanpassung ein großes Bild, so dass es passt in eine kleinere Breite div-container, während die Aufrechterhaltung es ist Breite:Höhe-Verhältnis?

Beispiel: stackoverflow.com - wenn ein Bild eingefügt wird in den editor-panel und das Bild ist zu groß, um auf die Seite, wird das Bild automatisch in der Größe angepasst.

InformationsquelleAutor der Frage 001 | 2010-06-12

229

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

stellt sich heraus, es ist ein anderer Weg, dies zu tun.
```
<img style='height: 100%; width: 100%; object-fit: contain'/> 
```
wird die Arbeit zu tun. Es ist CSS3 Zeug.

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

InformationsquelleAutor der Antwort Shih-Min Lee
92

Derzeit gibt es keine Möglichkeit, diese richtig zu tun, in einer deterministischen Art und Weise, mit der festen Größe von Bildern wie JPEG-oder PNG-Dateien.

Größe ändern, ein Bild proportional zu verändern, müssen Sie entweder die Höhe oder die Breite auf "100%", aber nicht beide. Wenn Sie beide auf "100%", wird Ihr Bild gestreckt werden.

Auswählen, ob Höhe oder Breite ist abhängig von Ihrem Bild und container Maße:
1. Wenn Sie Ihre Bild-und container sind beide "portrait-förmigen" oder " beide "Landschaft geformt" (höher als breit oder breiter als Sie hoch sind, beziehungsweise), dann ist es egal welche Höhe oder Breite in "%100".
2. Wenn Ihr Bild ist das Porträt, und Ihr container die Landschaft, Sie müssen height="100%" auf dem Bild.
3. Wenn Ihr Bild ist Landschaft, und Ihre container hochformat, müssen Sie width="100%" auf dem Bild.
Wenn Ihr Bild ist ein SVG, das ist ein variable-sized-Vektor-Bild-format haben, können Sie die Erweiterung zu passen, die Behälter automatisch geschehen.

Den Sie gerade haben, um sicherzustellen, dass die SVG-Datei hat keine dieser Eigenschaften legen Sie in der <svg> tag:
```
height
width
viewbox
```
Meisten Vektor-Zeichenprogramm Programme gibt, werden diese Eigenschaften beim Export einer SVG-Datei, so müssen Sie manuell Bearbeiten Sie Ihre Datei jedes mal, wenn Sie exportieren oder ein Skript schreiben, um es zu tun.

InformationsquelleAutor der Antwort Neil

Hier ist eine Lösung, die sowohl vertikal als auch horizontal ausrichten, dass Ihre img innerhalb eines div-ohne Dehnung, auch wenn das Bild geliefert wird, ist zu klein oder zu groß, um fit in den div.
Html:

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

CSS:

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

Den JQuery:

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

Ich hoffe das hilft Euch

InformationsquelleAutor der Antwort Humble Rumble

36

Machen Sie es einfach!

Geben Sie dem container einen festen height und dann für die img tag innerhalb es width und max-height.
```
<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
```
Unterschied ist, daß Sie die width zu 100% nicht der max-width.

InformationsquelleAutor der Antwort Mehdi Maghrooni

Überprüfen Sie heraus meine Lösung: http://codepen.io/petethepig/pen/dvFsA

Es ist geschrieben in reinem CSS, ohne JS-code.
Es kann Bilder von jeder Größe und jeder Ausrichtung.

Solche 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;
}

InformationsquelleAutor der Antwort dmitry

17

Können Sie das Bild als hintergrund für ein div, dann verwenden Sie die css background-size-Eigenschaft
```
background-size: cover;
```
und es wird "Skalieren Sie das Hintergrundbild so groß wie möglich, so dass der hintergrund-Bereich ist komplett überdacht durch das Hintergrundbild. Einige Teile des hintergrund-Bild kann nicht im Hinblick auf die innerhalb der hintergrund-Positionierung-area" w3schools.com

InformationsquelleAutor der Antwort Chuck Dries

Ein schöner hack.

Haben Sie zwei Möglichkeiten, das Bild reagiert.

Wenn ein Bild ist ein Hintergrundbild.

#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>

Ausführen hier

Aber sollte man img tag zu legen Bilder als es ist besser als background-image im Hinblick auf SEO wie Sie schreiben Stichwort in der alt des img tag. So, hier ist Sie kann das Bild reagiert.

Wenn die Bilder in img tag.

#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>

Ausführen hier

InformationsquelleAutor der Antwort Siraj

Diese Lösung nicht Strecken Sie das Bild und füllt den gesamten container, sondern er schneidet einige der Bild.

html

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

CSS

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

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

}

InformationsquelleAutor der Antwort Miia Klingstedt

8

Ich gerade veröffentlichte ein jQuery-plugin, das genau das tun, was Sie müssen mit einer Menge von 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();
});
```
InformationsquelleAutor der Antwort Nicolas BADIA
4

Die akzeptierte Antwort von Thorn007 funktioniert nicht, wenn das Bild ist zu klein.

Um dieses Problem zu lösen, habe ich ein scale-Faktor. Diese Art macht das Bild größer und es füllt den div-container.

Beispiel :
```
<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
```
Hinweise:

1/für webkit, die Sie hinzufügen müssen -webkit-transform:scale(4); -webkit-transform-origin:Links oben; in der style.

2/mit einer Skalierung um den Faktor 4, Sie haben max-width = 400/4 = 100 und max-Höhe = 200/4 = 50

3/eine Alternative Lösung ist die Vergabe von max-width und max-height auf 25%, dann ist es umso einfacher

InformationsquelleAutor der Antwort user217447
4

Den code unten angepasst, von oben und getestet von mir mit einem Bild genannt storm.jpg
Das ist der komplette HTML-code für eine einfache Seite, zeigt das Bild. Das funktioniert perfekt und wurde getestet von mir mit http://www.resizemybrowser.com. Setzen der CSS-code am Anfang Ihres HTML-Codes ein, die sich unter Ihrem Kopf Abschnitt. Setzen Sie den Bild-code, wo Sie wollen das Bild.
```
<html>
<head>
  <style type="text/css">
  #myDiv 
  {
    height:auto;
    width:auto;
  }
  #myDiv img
  {
    max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
  }
 </style>
</head>

<body>
    <div id="myDiv">
        <img src="images/storm.jpg">
    </div>
</body>
</html>
```
InformationsquelleAutor der Antwort dan

Ich zentriert und proportional skaliert ein Bild in einem hyperlink sowohl horizontal als auch vertikal auf diese Weise:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Getestet in IE, Firefox, Safari.

Mehr info über das zentrieren ist hier.

InformationsquelleAutor der Antwort bancer

3

Geben Sie die Höhe und Breite, die Sie benötigen für das Bild in das div enthält den < img> tag.
vergessen Sie nicht, geben Sie die Höhe/Breite im richtigen Stil-Tags.
In der < img> tag, geben dem max-height und max-width 100%.
```
<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
```
können Sie die details in den entsprechenden Klassen, nachdem Sie es richtig gemacht.

InformationsquelleAutor der Antwort AZD

<style type="text/css"> 
#container{
text-align:center;
width: 100%;
height: 200px; /*set height*/
margin: 0px;
padding: 0px;
background-image:url('../assets/images/img.jpg');
background-size: content; /*scaling down large image to a div*/
background-repeat:no-repeat;
background-position:center;
}
</style>

<div id="container>
<!--inside container-->
</div>

InformationsquelleAutor der Antwort easd

Müssen Sie dem browser mitteilen, die Höhe, wo Sie sich platzieren es.

.example {
  height: 220px; //DEFINE HEIGHT
  background:url('../img/example.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

InformationsquelleAutor der Antwort Rick

2

Eine einfache Lösung ( 4-Schritt-fix !!) das scheint für mich zu arbeiten , ist unten. Hoffe, es hilft.Im Beispiel wird die Breite bestimmen Sie die Allgemeine Größe, aber Sie können auch flip zu verwenden, die Höhe, statt.
1. Gelten CSS-styling auf dem Bild-container ( z.B.
2. die width-Eigenschaft festlegen, um die dimension, die Sie möchten
  - für Bemaßungen verwenden Sie % für die relative Größe oder autoskalierender ( basierend auf Bild-container oder display )
    -verwenden Sie px ( oder andere ) für eine statische, oder legen dimension
3. legen Sie die height-Eigenschaft automatisch anpassen, basierend auf der Breite
4. GENIEßEN!
beispielsweise
```
<img style="width:100%; height:auto;"
                            src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
                />
```
InformationsquelleAutor der Antwort young chisango
2

Als hier beantwortetkönnen Sie auch vh Einheiten statt max-height: 100% wenn es nicht funktioniert in Ihrem browser (wie Chrome):
```
img {
    max-height: 75vh;
}
```
InformationsquelleAutor der Antwort gaborous
1

Alle zur Verfügung gestellten Antworten, einschließlich der akzeptiert, Arbeit nur unter der Annahme, dass die div wrapper ist eine Feste Größe. Also das ist, wie es zu tun was die Größe der div wrapper ist und das ist sehr nützlich, wenn Sie entwickeln eine responsive Seite:

Schreiben Sie diese Angaben in Ihre DIV selector:
```
width : 8.33% /* or whatever percentage you want your div to take*/
max-height : anyValueYouWant /*(in px or %)*/ 
```
Dann legen Sie diese Angaben in Ihre IMG selector:
```
width : "100%" /* obligatory */
max-height :  anyValueYouWant /*(in px or %)*/ 
```
SEHR WICHTIG:

Den Wert maxHeight muss die gleichen sowohl für die DIV und IMG Selektoren.

InformationsquelleAutor der Antwort Billal BEGUERADJ
0

Die Lösung ist einfach mit ein bisschen Mathematik...

Nur das Bild in ein div und dann in der html-Datei, geben Sie die Bild-legen Sie die width-und height-Werte in Prozent unter Verwendung der Pixelwerte des Bildes zu berechnen, das genaue Verhältnis von Breite zu Höhe.

Zum Beispiel, sagen, Sie haben ein Bild mit einer Breite von 200 Pixel und eine Höhe von 160 Pixel. Man kann sicher sagen, dass der Wert für die Breite von 100%, denn es ist der größere Wert. Dann berechnen die Höhe der Wert, den Sie teilen Sie einfach die Höhe durch die Breite, die gibt den Prozentwert von 80%. Im code wird wie folgt Aussehen...

InformationsquelleAutor der Antwort user2796283
0

check meine ans https://stackoverflow.com/a/36712112/2439715
```
img{
    width: 100%;
    max-width: 800px;
}
```
InformationsquelleAutor der Antwort Abhishek Goel
0

Eine einfache Lösung ist die Verwendung von flex-box. Definieren Sie den container mit CSS:
```
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /*any custom height*/
}
```
Anpassen, dass das enthaltene Bild in der Breite auf 100% und sollte man sich ein schönes Bild zentriert in den Behälter mit den Abmessungen erhalten. Cheers.

InformationsquelleAutor der Antwort Mateo Marin

-1

Einfachste Weg, dies zu tun ist

durch die Verwendung von Objekt-fit

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height:100%;
  width:100%;
  object-fit: cover;
}

Wenn Ihr mit bootstrap fügen Sie einfach den img-responsive-Klasse und wechselte an

.container img{
      object-fit: cover;
    }

InformationsquelleAutor der Antwort Joseph Lariosa

-1

Oder nutzen Sie einfach:
```
background-position:center;
background-size:cover;
```
Nun das Bild nehmen den Raum der div.

InformationsquelleAutor der Antwort Sharifur Robin

-1

Folgende funktioniert perfekt für mich:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

InformationsquelleAutor der Antwort Chong Lip Phang

-5

Definieren div einfach

   div.headerimg1 {
       position: absolute;
       top: 290px;
       left: 81px;
       width: 389px;
            height: 349px;
}
<div class="headerimg1">
<img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;
display:inline;"></div>

InformationsquelleAutor der Antwort user2522692

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.