web-dev-qa-db-ja.com

高さを変更するときに画像の縦横比を維持する

CSSフレックスボックスモデルを使用して、画像の縦横比を維持するにはどうすればよいですか。

JSフィドル： http://jsfiddle.net/xLc2Le0k/2/

コンテナの幅を埋めるために、画像が伸縮することに注意してください。それでいいのですが、画像の縦横比を維持するために高さを伸縮させることもできますか？

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}
htmlcsscss3flexbox
105
coderMe

一方の面を定義した場合のimgタグの場合、もう一方の面は縦横比を維持するようにサイズ変更され、デフォルトでは画像は元のサイズに拡大されます。

この事実を利用して、各imgタグをdivタグにラップし、その幅を親divの100％に設定すると、高さは望みどおりの縦横比になります。

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}
60
Muhammad Umer

フレックスペアレント内で画像がどちらの軸にも伸びないようにするため、いくつかの解決策を見つけました。

あなたは、画像にオブジェクトフィットを使用して試すことができます。

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

あるいは、場合によってはうまく機能するかもしれないフレックス特有のルールを追加することができます。

align-self: center;
flex: 0 0 auto;
55
Matty Balaam

含まれているdivを追加する必要はありません。

Cssの "align-items"プロパティのデフォルトは "stretch"で、これはあなたの画像を元の高さいっぱいまで引き伸ばしている原因です。 cssの「align-items」プロパティを「flex-start」に設定すると問題は解決します。

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}
44
Marvin Herbold

固有寸法を持つほとんどの画像、つまりjpeg画像のように自然サイズです。指定されたサイズが幅と高さの両方を定義している場合、欠損値は固有の比率を使用して決定されます。 - MDN を参照してください。

しかし、私の知る限りでは、現在の Flexible Box Layout Module Level 1 で直接フレックスアイテムとして設定されている画像では、期待通りには機能しません。

これらの議論を見て、バグレポートは関連しているかもしれません：

  • Flexbugs＃14 - Chrome/Flexboxの組み込みサイズ設定が正しく実装されていません。
  • Firefox Bug 972595 - フレックスコンテナは、フレックス項目の固有の幅を計算するために "width"ではなく "flex-basis"を使用するべきです。
  • Chromium Issue 249112 - Flexboxでは、固有の縦横比がメインサイズの計算に通知されるようにします。

回避策として、各<img>を<div>または<span>などでラップすることができます。

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}
<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5暗黙の最小サイズのフレックスアイテム

flex items に対してより合理的なデフォルトの最小サイズを提供するために、この仕様では min-width の初期値として新しい auto 値を導入しています。 min-height CSS 2.1で定義されているプロパティ。

代わりに、CSSのtableレイアウトを代わりに使用することもできます。これはflexboxと同様の結果が得られます。IE8の場合でも、より多くのブラウザで動作します。

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}
<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>
33
Stickers

私は最近flexboxの周りで遊んでいます、そして私は実験と以下の推論を通してこれの解決策になりました。しかし、現実には、これがまさに起こるのかどうかはわかりません。

実際の幅がフレックスシステムの影響を受ける場合そのため、要素の幅が親の最大幅に達すると、cssで設定された余分な幅は無視されます。それから幅を100％に設定しても安全です。

Imgタグの高さは画像自体から派生しているので、高さを0％に設定すると何かができます。 （これは私が何に関して不明確なところです...しかしそれはそれを修正する必要があることは私には意味がありました）

DEMO

（覚えておいてください最初にここでそれを見た！）

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

まだクロムだけで動作します

5
Muhammad Umer

これは予想される動作です。 flexコンテナはデフォルトですべての子をstretchします。画像に例外はありません。 （つまり、親にはalign-items: stretchプロパティがあります）

アスペクト比を維持するために、2つのソリューションがあります。

  1. デフォルトのalign-items: stretchプロパティをalign-items: flex-startまたはalign-self: centerなどに置き換えます。 http://jsfiddle.net/e394Lqnt/3/

または

  1. 子自体にのみalignプロパティを設定します：align-self: centerまたはalign-self: flex-startなど。 http://jsfiddle.net/e394Lqnt/2/
1
Asim K T