wie Bildhöhe automatisch anpassen und mit in div.

Question

In meinem Fall habe ich ein Bild mit den Abmessungen 1587 * 666. und ich möchte dieses Bild in ein div mit Höhe 600px und Breite 300px passen. aber ich bin nicht erfolgreich, dies zu tun. Irgendwelche helfen mir mit Beispiel.

Dies ist ein Code.

<div id="myDiv" style="width:300px; height:600px;"> 
<img src="top_add.png"/> 
</div> 

Answer 1

Bild tag Breite und Höhe auf "100%" angeben OR

Vererben Objekt geordnete Tag Höhe und Breite "erben".

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

OR

#myDiv img { 
     width:inherit; 
     height:inherit; 
    } 

Answer 2

gerade eingestellt Bild auf 100%.

---

HTML

---

<div id="myDiv"> 
<img src="top_add.png"/> 
</div> 

---

CSS

---

img{ 
    width: 100%; 
} 
#myDiv{ 
    width:300px; 
    height:600px; 
} 

Ich schlage vor, Sie nicht Inline-Styles

Answer 3

verwenden tun, wenn Sie setzen Breite und Höhe und einen Tag ändern Bild, um es eine schlechte Art und Weise skalieren wird. Es ist viel besser, es als Hintergrund mit Stilen dort zu setzen. Hier ein Beispiel:

height: 600px; 
width: 300px; 
background: url('path_to_your/image.jpg'); 
background-size: cover; 
background-position: center center;