113

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


}
4

8 に答える 8

62

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

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

jsフィドル

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

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

.top1 img {
    height:100%;
}
于 2013-05-09T16:13:52.137 に答える
57

Bootstrap 4 がimg-fluidの代わりにimg-responsive使用するようになったことに注意してください。問題がある場合は、使用しているバージョンを再確認してください。

于 2017-04-26T02:44:17.583 に答える
33

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

于 2016-03-11T10:18:29.613 に答える
8

私はこれを使用し、私のために働きます。

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
于 2018-04-19T03:26:26.760 に答える
7

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

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
于 2015-10-29T03:07:16.140 に答える