web-dev-qa-db-ja.com

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>
javascriptjqueryhtml5css3twitter-bootstrap
95
user2796803

ブートストラップのレスポンシブイメージクラスは、max-widthを100％に設定します。これによってサイズが制限されますが、画像自体よりも大きい親要素を埋めるように強制的に拡大されることはありません。あなたはアップスケーリングを強制するためにwidth属性を使わなければならないでしょう。

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

83
isherwood

確かに物事！

.img-responsiveは、イメージをブートストラップ3でレスポンシブにする正しい方法ですレスポンシブにしたい画像に高さのルールを追加できます。

17
Omar El Don

それでも問題が解決するかどうかはわかりませんが、イメージを大きくするために細かいトリックを行う必要がありました。

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

}

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

8
Gil

画像に固定幅を設定することが選択できない場合は、これが代替策です。

Displayを持つ親divを持つこと：table＆table-layout：修正されました。次に、表示する画像を設定します。テーブルセルと最大幅を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/

7
Bruno Fondevila

そうすることを試みなさい：

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;  
}
3
user3941146

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

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

私はあなたが画像上に.colクラスを置くことができることを発見しました - しかしこれはそれに余計なフロートのようなクラスに関連する他の属性と共に余分なパディングを与えます、しかし追加としてクラス。

1
MikeyC