web-dev-qa-db-ja.com

Safariのflexboxでの画像ストレッチ

これはSafariの問題にすぎず、私にはSafariのバグのように見えます。これが fiddle で、問題の簡略化されたバージョンです。

画像が入れ子になっている場合flexbox element with a width set and height: auto引き伸ばされています...自動高さが機能していません。これをSafariで機能させるには、何か追加する必要がありますか？

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  margin-bottom: 25px;
}

.container img {
  width: 125px;
  height: auto;
}
<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>

アスペクト比を維持するために、画像の高さが自動的に調整されることを期待しています。これはSafariを除くすべてのブラウザで機能します。 Safariでは、画像が引き伸ばされ、自動高さが機能しません。

cssimagesafariflexboxheight
11
Brian

確かにバグのようです。

thealign-itemsプロパティ のデフォルト設定はstretchです。ほとんどの主要なブラウザはこれを賢く処理し、画像を拡張しますコンテナの範囲内。

なんらかの理由で、Safariは画像を自然な高さに伸ばし、コンテナを乗せます。

flex-direction: row

この問題を修正するには、flex-startプロパティのalign-itemsでstretchデフォルト値を上書きします。

.container {
  display: flex;
  flex-direction: column;
}
.container section:first-child {
  display: flex;
  align-items: flex-start; /* new */
  margin-bottom: 25px;
}
.container img {
  width: 125px;
  height: auto;
}
<div class="container">
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
</div>

jsFiddleデモ

flex-direction: column

フレックスコンテナーの方向をcolumnに切り替えると、問題も修正されます。これは、align-itemsが幅に適用されるため機能しますand画像の幅を定義しました。

画像の寸法を逆にする場合

.container img {
   width: 125px;
   height: auto;
}

に

.container img {
   width: auto;
   height: 125px;
}

... Safariでもflex-direction: rowと同じ問題が発生し、修正にはalign-items: flex-startが必要です。

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  /* align-items: flex-start; */
  margin-bottom: 25px;
}

.container img {
  width: auto;
  height: 125px;
}
<div class="container">
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
</div>

jsFiddleデモ

16
Michael_B

実際の例については、私のデモを参照してください、flex-direction: column;この問題を修正します。

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.container img {
  width: 125px;
  height: auto;
}
<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>
0
christiaansnoei