Erstellen Sie ein Bild, um es den übergeordneten Dimensionen anzupassen

Question

Ich habe einige Fotos, die groß sind, und ich möchte sie auf die Dimension Dimension des Eltern festlegen. Wenn die Elterngröße einmal 1200x800 ist, möchte ich die Fotodimensionen auf 1200x800 einstellen, aber ich würde auch gern das ganze Bild sehen. Wenn meine Elterndimension 500x300 ist, möchte ich, dass das Bild 500x300 ist und so weiter.

Ist das überhaupt möglich? Ich möchte das Bild verkleinern oder entsprechend seiner Dimension erweitern.

Danke!

Answer 1

Die CSS-Eigenschaft, die Sie wollen, ist max-width:

Css

img { 
    max-width:100%; 
} 

Sie einen Container um Ihr Bild hinzufügen könnte und stellen overflow:hidden Bilder zu verhindern, dass die Höhe größer werden als die definierte Breite/.

Answer 2

Verwenden Sie dieses Bit von CSS Ihr Bild zu skalieren:

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

Answer 3

die Sie interessieren im Bildtag

<img src="url.jpg" width="100%" height="100%" /> 

Oder die backgound des Elements als das Bild, und das gleiche tun gesetzt.

Answer 4

Ich könnte naiv sein, aber ist das nicht so einfach wie das?

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

Answer 5

versuchen, die max-width-Eigenschaft verwendet wird, könnte dies einen Fehler in früheren Versionen geben IE obwohl

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