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;


}

画像のwidthand heightを明示的に定義することはできますが、結果は見栄えが良くない場合があります。

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

...コメントごとに、ブロックすることもできますoverflow- この例を参照して、高さが制限されている画像を確認し、幅が広すぎるために切り取ってください。

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

この方法を試してください：

<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>

ことだけで頭までブートストラップ4が今使用してimg-fluidの代わりにimg-responsive、あなたが問題を抱えている場合は、使用しているバージョンなので、ダブルチェック。

クラスimg-responsiveをimgタグに追加するだけで、ブートストラップ3以降で適用できます。

私も同じ問題を抱えていて、次の簡単な解決策を見つけました。画像に少しパディングを追加するだけで、div内に収まるようにサイズが変更されます。

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

私はこれを使って私のために働いています。

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

Bootstrap-4をお探しの方。ここにあります

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

ほとんどの場合、ブートストラッププロジェクトはjQueryを使用するため、jQueryを使用できます。

ただで親の幅と高さを取得JQuery.offsetHeight()してJQuery.offsetWidth()、として子要素にそれらを設定JQuery.width()してJQuery.height()。

レスポンシブにする場合は、上記の手順をでも繰り返し$(window).resize(func)ます。