Wie kann ich ein Bild in ein div-Element einfügen, wenn das Bild breiter ist als das div?

Question

Ich habe ein Image-Tag in einem Div-Element.

Das Bild ist größer als das Div, also ist das Bild nicht innerhalb des Div-Elements. Zuerst habe ich darüber nachgedacht width = x, height = y zu verwenden. Aber während ich die Seite noch entwerfe, habe ich Angst, mich ständig um diese zwei Dimensionen kümmern zu müssen.

Wie kann ich das Bild im div-Element behalten? auch unter Berücksichtigung der Dimensionen des div-Elements?

Vielen Dank für Von hier

Answer 1

helfen: Three ways to resize images to fit a DIV

Mit dem Attribut STYLE im IMG-Tag manuell für jedes Bild die Breite oder Höhe eingestellt (im Wesentlichen die gleiche wie # 1).

<div id="img_box"> 
<img style="width: 100%;" src="path/to/horizontal_image.jpg" /> 
</div> 
<div id="img_box"> 
<img style="height: 100%;" src="path/to/vertical_image.jpg" /> 
</div> 

Ich hoffe, es löst Ihr Problem.

Bearbeiten: Beste Lösung ist, das Bild tatsächlich mit serverseitigen Skript zu skalieren. Das Skalieren von Bildern im Browser funktioniert normalerweise nicht sehr gut.

Edit2: http://unstoppablerobotninja.com/entry/fluid-images

Answer 2

Das ist für mich gearbeitet.

.myimg {width:200px; height:auto;} 

Automatische Größenänderung von Bildern in allen Browsern.

Answer 3

Jungs nach zu viel Zeit suchen für eine einfachere Möglichkeit, dies zu tun, kombiniere ich die Informationen aus der Forschung, um es so zu tun: (einfach mit der getimagesize() Funktion -wenn die Höhe größer ist als die Breite, echo an Bild-Tag mit einem Stil, der eine Höhe von 100% hat, sonst das gleiche Bild-Tag aber mit einem Stil mit einer Breite von 100%);

$image = "path to your image"; 
$img_size = getimagesize($image); 

if ($img_size[0] < $img_size[1]){echo " < img src= '$image' style='height:100%;'>";} 
else {echo "< img src= '$image' style='width:100%;'>";} 

Answer 4

Da dieser Beitrag eine Weile her ist, Ich denke, ich es mit einer moderneren Art und Weise, dies zu tun, die keine JS erfordert aktualisieren würde.

Ich würde empfehlen, die CSS-Eigenschaften background-size:cover und background-position: center strecken, zuschneiden und positionieren Sie das Bild mit (unter Verwendung von background-image das Bild in den div eingestellt).

Es wird das Bild zu schrumpfen oder wachsen auf die div passen vollständig dann alles außerhalb der div beschneiden. Es ist eine gute Möglichkeit, Bilder von etwas anderen Formen und Größen in einem Div zu behandeln.

HTML

<div class="flexbox-container"> 
    <div class="filled-with-image"></div> 
</div> 

CSS

.flexbox-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: flex-end; 
    justify-content: center; 
} 

.filled-with-image { 
    width: 50%; 
    height:400px; 
    background-image: url(http://unsplash.it/1500/1000?image=875); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    background-position: center bottom; 
} 

See the code here.