100

幅と高さの比率を維持するように画像のサイズを変更する方法を見つけようとしていますが、画像の高さが含まれるdivの高さと一致するまでサイズが変更されます。かなり大きくて長いこれらの画像（スクリーンショット）があり、手動で画像のサイズを変更せずに、幅200px、高さ180pxの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%;
}

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

4

6 に答える 6

99

元の回答:

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-width を探し、最小の高さを親の 100% に設定しようとします。どちらも逆になります。これにより、div の周りにギャップがなくなりますが、画像は常に少し大きくなり、overflow:hidden;

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

魔法の瞬間:

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

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

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

これは、画像の重心と親 DIV を見つけて一致させるためのトリッキーな方法です。

説明が長くなりすぎてすみません！

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

于 2013-10-05T02:20:31.280 に答える
47

コードを変更してください:

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/

于 2013-10-05T02:02:31.250 に答える
2

answer のShekhar K. Sharma を使用して、それがほとんど機能する場合は、これまたはこれを追加して、必ず機能するようにする必要がありheight: 1px;ますwidth: 1px;。

于 2019-10-05T09:48:21.700 に答える