Bootstrapでdivに合うように画像サイズを調整する 質問する

Bootstrapでdivに合うように画像サイズを調整する 質問する

特定のサイズの 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>

おすすめ記事