web-dev-qa-db-ja.com

Bootstrap列サイズに基づいてサイズ変更されない画像

私の目標は、行ごとに4つの画像を表示することです。以下のコード：

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>                                                                                    
</div>

また、Bootstrapの列スタイルに基づいてサイズ変更された画像が表示されることも期待していますが、取得しているのは完全な画像が重複していることです。

何が起こっているのか、手がかりはありますか？

cssimagetwitter-bootstraptwitter-bootstrap-3
44
JackTheKnife

これをスタイルシートに追加してみてください：

img {
    width: 100%;
}

更新：代替として（この回答の@JasonAllerによるコメントで指摘されているように）、class="img-responsive"各img要素。これはmax-width: 100%;およびheight: auto;は、画像を親要素に合わせて適切に拡大縮小します。詳細については、 Bootstrap docs を参照してください。

86
henrywright

Bootstrap 4を使用すると、class = "img-fluid"を使用する必要があります。class= "img-responsive"は3.xで機能します。

22
Ray Koren

ユーザーが入力する内容を制御できない動的コンテンツでは、class = "img-responsive"が機能しない場合があります。また、各画像の「幅：100％」も注意が必要です。だから私は使用しています：

img {max-width: 100%;}
6
Nookeen

bootstrap=列にもパディングがあることに注意してください。これは予期しないことです。

以下：

div class="col-sm-6" style="padding:0"

私のために働いた。

1
Katia Punter

必要に応じて、html要素でwidthタグを使用できます。次に例を示します。

    <img width="60%" src="...">

あなたが希望のサイズになるまでパーセンテージで遊ぶことができるので、私はそれがより便利だと思います。

0
Juano