web-dev-qa-db-ja.com

コンテナに合わせて画像を拡大縮小する方法は？

画像リストがあります。同じサイズのコンテナに画像を拡大縮小したいです。このような：

ab

jsfiddle を作成しました

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" >
            </a>
        </div>
    </div>
</div>

どうやってやるの？そして、私の例では、高さ：100pxを定義しました;これは、ブラウザのサイズを変更してもdivの高さは変わらないままであるため、応答しなくなります。可能であれば、このイメージリストをレスポンシブにします。

csstwitter-bootstrapcss3twitter-bootstrap-3
21
Sato

heightとwidthをmax-heightとmax-widthに変更します。画像は親より大きくなりません。

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

更新されたフィドル

33
LinkinTED
.thumbnail {
    height: 100px;
    display: table;
}

.thumbnail img {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
6
Coding Enthusiast

2017年にはflexを使用できます。さらに、サムネイルコンテナーの中央に画像を取得します。 更新されたフィドル

.thumbnail {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px blue;
}

.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    border: solid 1px red;
}
2
raisercostin

少なくともあなたの例では、これが役立つはずです。これが機能しない場合があります。その場合、jsソリューションを見つける必要があります。

.thumbnail img {
  height: 100%;
  width: auto;
}
1
m4lt3
 .thumbnail {
        height: 100%;
    }

    .thumbnail img {
        max-height: 100%;
        max-width: 100%;
        border: 1px solid red;
    }
0
Mr_vasu
.thumbnail img {
 height: 100%;
    width: 100%;
}

これを使って。

0
Danish Khan

（これは古い質問ですが、答えを追加します。クラスthumbnailを画像リンクに追加し、少し深く見えるまで同じ問題がありました。追加のCSSは必要ありませんでした。）

たぶん何かが変更されます。 Bootstrap 3.3.7。これがあります（非縮小css、行5019）：

.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}

そして、これ（非縮小css、1124行目）：

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

したがって、クラスthumbnailを画像リンクに追加した場合、すべてがすぐに動作するはずです。 （これらの両方を削除する必要があり、物事は壊れます。）そして、追加されたCSSの有無にかかわらず動作します：

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

追加されたスタイルは、Bootstraps独自のスタイルの後に含まれるため、追加されたcssは、少なくとも私にとってはBootstrapsスタイルをオーバーライドします。 （ただし、冗長です。）

0
ZZ-bb