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%;
}

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

元の回答：

CSS3を選択する準備ができている場合は、css3translateプロパティを使用できます。大きいものに基づいてサイズを変更します。高さがコンテナよりも大きく、幅が小さい場合、幅は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が鍵です。最小の高さで、画像の高さが親の高さを超えていれば、問題ありません。最小幅かどうかを探し、最小の高さを親の100％に設定しようとします。どちらもその逆になります。これにより、divの周囲にギャップがなくなりますが、画像は常に少し大きくなり、によってトリミングされます。overflow:hidden;

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

魔法の瞬間：

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

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

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

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

説明に時間がかかりすぎて申し訳ありません！

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

コードを変更します。

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/

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

img{
  max-width:100%;
}

あなたが取る場合の答えのほとんどの作業をシェカールK.シャルマ、そしてそれを、また、あなたのこれに追加する必要がheight: 1px;またはこのwidth: 1px;必見の作品のために。

あなたはそれのためにフレックスボックスを使うことができます..これはあなたの問題を解決します

.image-parent 
{
     height:33px; 
     display:flex; 
}