ブートストラップで画像が応答しない

Question

私はブートストラップを使用していますが、私は約3000 x 2000ピクセルの大きな画像を持っています。スタイルの呼び出し幅が300、高さが300 pxのときにイメージを反応させたいと思っています。イメージを乱すことなくイメージを反応させるにはどうすればよいですか？

<li data-thumb-alt="" style="width: 350px: height : 300px; margin-right: 30px; float: left; display: block;"> 
    <div class="features"> 
     <img style="" class="img img-responsive" src="/Content/BusinessProfileImages/747f651f.jpg" alt="alternate text here" draggable="false"> 
     <div class="container_address"> 
      <a href="/Home/BusinessDetail?BusinessId=436&amp;AppointmentID=0"> 
     </div> 
    </div> 
</li> 

.features img { 
    margin: 0 auto; 
    width: 100%; 
    padding-buttom: 3px; 
    margin-top: 1px; 
    float:left; 
} 

Answer 1

「IMG」タグは、それがあなたのバウンドに合わせて縦横比を変更するために何ができるでしょうので、画像全体を表示するためのものです。元のアスペクト比ではなく画像を反応させる必要がある場合、オプションをコンテナ内の背景画像として使用することができます。この方法の問題は、元のアスペクト比を維持していないため、画像のエッジをカットする際に問題があることです。

background-sizeとbackground-positionに役立つリンクがいくつかあります。これらの組み合わせを使用すると、背景画像の中央を拡大して、縦横比を歪ませることなくサイズを維持できます。