Bootstrap 3でもスケールアップするレスポンシブなイメージを作成する方法

現在、Twitterブートストラップ3を使用していますが、レスポンシブな画像を作成する際に問題が発生しています。私はimg-responsiveクラスを使いました。しかし、画像サイズは拡大されていません。width:100%代わりに使用するとmax-width:100%、完全に機能します。問題はどこだ？これは私のコードです：

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

ブートストラップのレスポンシブ画像クラスはmax-width100％に設定されています。これによりサイズが制限されますが、画像自体よりも大きい親要素を満たすために拡大することは強制されません。widthアップスケーリングを強制するには、属性を使用する必要があります。

http://getbootstrap.com/css/#images-sensitive

確かに！

.img-responsive ブートストラップ3を使用して画像を反応させる適切な方法です。責任を負うと、高さに沿って幅が変化し、それを修正するので、反応させたい画像に高さルールを追加できます。

それでも問題が解決するかどうかはわかりませんが、画像を大きくして応答性を維持するために、ちょっとした工夫が必要でした

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

それがPSに役立つことを願っています最大幅はあなたが好きなものにすることができます

画像に固定幅を設定するオプションがない場合は、次の解決策があります。

display：table＆table-layout：fixedの親divを持つこと。次に、表示する画像を設定します：table-cellおよびmax-widthを100％に設定します。このようにして、画像は親の幅に合わせます。

例：

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

フィドル：http : //jsfiddle.net/5y62c4af/

CSSスタイルシートで次のことを試してください。

.img-responsive{
  max-width: 100%;
  height: auto;
}

そうしようとする：

1）index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2）あなたのstyle.cssで

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

私はあなたが画像に.colクラスを置くことができることを発見しました-しかし、これはそれがクラスに関連付けられた他の属性と一緒に追加のパディングを提供します、例えばフロートレフト、しかしこれらは例えばパディングなしでキャンセルすることができます追加としてのクラス。

画像が壊れているのではないでしょうか。例：画像サイズは195px X 146pxです。

タブレットなどの低解像度で動作します。解像度が1280 X 800の場合、幅も100％なので、強制的に大きくなります。アイコンフォントのようなメディアクエリ内のCSSが最善の解決策かもしれません。