Css

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



Image Stretching Flexbox Safari



解決：

確かにバグのようです。

のデフォルト設定 アイテムを揃える プロパティはストレッチ。ほとんどの主要なブラウザはこれを賢明に処理し、画像を引き伸ばします コンテナの範囲内 。



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

フレックス方向：行

問題を修正するには、デフォルト値をストレッチフレックススタートalign-itemsプロパティ。



.container {display：flex;フレックス方向：列; } .container section：first-child {display：flex; align-items：flex-start; / *新規* / margin-bottom：25px; } .container img {幅：125px;高さ：自動; }
      
jsFiddle demo
 
 
フレックス方向：列
 
フレックスコンテナの方向をに切り替える列も問題を修正します。これが機能するのはalign-itemsがwidthに適用されるようになりました と 画像に幅を定義しました。
 
から画像の寸法を逆にした場合
 
.container img {幅：125px;高さ：自動; }
に
 
 
 
.container img {幅：自動;高さ：125px; }
... Safariでも同じ問題が発生しますフレックス方向：行、および必要性align-items：修正のためのflex-start。
 
.container {display：flex;フレックス方向：列; } .container section：first-child {display：flex; / * align-items：flex-start; * / margin-bottom：25px; } .container img {幅：自動;高さ：125px; }
      
jsFiddle demo
  
実用的な例については私のデモを参照してください、追加フレックス方向：列;この問題を修正します。
 
.container {display：flex;フレックス方向：列; } .container section：first-child {display：flex;フレックス方向：列;マージンボトム：25px; } .container img {幅：125px;高さ：自動; }
   
高さの追加：固有;サファリの引き伸ばされた高さを修正するために私のために働きます。画像自体に追加します。ラッパーではありません。あなたはまだ高さが必要です：他のブラウザのための自動。