ฉันกำลังพยายามทำให้ภาพพอดีกับ div ขนาดที่กำหนด น่าเสียดายที่รูปภาพไม่เป็นไปตามสัดส่วนและแทนที่จะย่อขนาดให้เป็นขนาดที่ไม่ใหญ่พอ ฉันไม่แน่ใจว่าวิธีที่ดีที่สุดคือวิธีใดในการทำให้ภาพพอดีกับภายใน
หากรหัสนี้ไม่เพียงพอฉันยินดีที่จะจัดหาเพิ่มเติมและฉันพร้อมที่จะแก้ไขข้อผิดพลาดอื่น ๆ ที่ฉันมองข้ามไป
นี่คือ HTML
<div class="span3 top1">
<div class="row">
<div class="span3 food1">
<img src="images/food1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="span3 name1">
heres the name
</div>
</div>
<div class="row">
<div class="span3 description1">
heres where i describe and say "read more"
</div>
</div>
</div>
CSS ของฉัน
.top1{
height:390px;
background-color:#FFFFFF;
margin-top:10px;
}
.food1{
background-color:#000000;
height:230px;
}
.name1{
background-color:#555555;
height:90px;
}
.description1{
background-color:#777777;
height:70px;
}