特定のサイズの 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;
}
ベストアンサー1
次の方法を試してください:
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="images/food1.jpg" class="img-responsive">
</div>
</div>
アップデート:
Bootstrap 4 ではimg-responsive
となるimg-fluid
ため、Bootstrap 4 を使用したソリューションは次のようになります。
<div class="container">
<div class="col-md-4 px-0">
<img src="images/food1.jpg" class="img-fluid">
</div>
</div>