[解決済み] divに合わせた画像サイズの調整 (bootstrap)

質問

ある画像を特定のサイズの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;


}

どのように解決するのですか？

明示的に width と height の画像を使用することができますが、その結果は見栄えが悪いかもしれません。

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

jsFiddle

...あなたのコメントによると、あなたはまた、すべての overflow - を見る この例では をクリックすると、高さが制限され、幅が広すぎるために切断された画像を見ることができます。

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

.top1 img {
    height:100%;
}