web-dev-qa-db-ja.com

CSS：親の高さを基準にして画像サイズを設定するにはどうすればよいですか？

画像の幅と高さの比率を維持するように画像のサイズを変更する方法を見つけようとしていますが、画像の高さが含まれているdivの高さと一致するまでサイズが変更されます。これらの画像はかなり大きくて長い（スクリーンショット）ので、表示用に画像を手動でサイズ変更せずに、幅200ピクセル、高さ180ピクセルのdivに入れたいと思います。これを適切に表示するには、画像の側面がオーバーフローし、含まれているdivで非表示になっている必要があります。これは私がこれまでに持っているものです：

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

ご覧のとおり、画像の親コンテナにはグレーの色が表示されていますが、表示されるべきではありません。そのコンテナを完全に満たすためには、幅を両側で均等にオーバーフローさせる必要があります。これは可能ですか？また、高すぎる画像を考慮することは可能ですか？

htmlcssimagecss3
57
Jon McPherson

元の回答：

CSS3を選択する準備ができている場合は、css3 translateプロパティを使用できます。大きいものに基づいてサイズを変更します。高さが大きく、幅がコンテナよりも小さい場合、幅は100％に引き伸ばされ、両側から高さがトリミングされます。同じことは、より大きな幅にも当てはまります。

あなたのニーズ、HTML：

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

そしてCSS：

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

出来上がり！作業中： http://jsfiddle.net/shekhardesigner/aYrhG/

説明

DIVはrelativeの位置に設定されます。これは、すべての子要素が、このDIVの開始位置から開始座標（原点）を取得することを意味します。

画像はBLOCK要素として設定され、min-width/heightの両方が100％に設定されていると、そのサイズに関係なく画像のサイズが親の最小100％に変更されます。 minがキーです。 min-heightで、画像の高さが親の高さを超えた場合、問題ありません。 min-widthを探し、最小の高さを親の100％に設定しようとします。両方とも逆になります。これにより、divの周囲に隙間はありませんが、画像は常に少し大きくなり、overflow:hidden;によってトリミングされます

これでimage、これはleft:50%とtop:50%でabsoluteの位置に設定されます。手段上から左に50％画像をプッシュし、原点がDIVから取得されていることを確認します。左/上の単位は、親から測定されます。

マジックモーメント：

transform: translate(-50%, -50%);

現在、CSS3のtranslateプロパティのこのtransform関数は、問題の要素を移動/再配置します。このプロパティは適用された要素を処理するため、値（x、y）OR（-50％、-50％）は、画像を画像サイズの50％だけ左に移動し、負の上部に移動することを意味します画像サイズの50％。

例えば。画像サイズが200px×150pxの場合、transform:translate(-50%, -50%)は翻訳するように計算されます（-100px、-75px）。 ％unitは、さまざまなサイズの画像がある場合に役立ちます。

これは、画像と親DIVの重心を把握し、それらを一致させるためのトリッキーな方法です。

説明に時間がかかりすぎることをおAびします！

詳細を読むためのリソース：

64
Shekhar K. Sharma

コードを変更します。

a.image_container img {
    width: 100%;
}

これに：

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

31
Jacques ジャック

次のように、CSSのmax-widthプロパティを使用します。

img{
  max-width:100%;
}
9
UniCoder