フレックスボックスがアスペクト比を維持するのではなく、なぜ画像を引き伸ばすのですか？

156

Flexboxには、画像を本来の高さに伸ばすという動作があります。つまり、子画像を含むflexboxコンテナがあり、その画像の幅をサイズ変更すると、高さがまったくサイズ変更されず、画像が引き伸ばされます。

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

スニペットを展開

何が原因ですか？

このCodePenを追加して、私の意味を説明しました。

html css flexbox

— sjbuysse
ソース

5

FirefoxおよびIEでは正常に動作します。Chrome align-self:flex-start では、画像で修正できます。理由はわかりませんが、Chromeのデフォルト値がストレッチである可能性があります。

2

高さも追加：100％; 画像に問題を修正するために、私はそれがなぜ画像も引き伸ばすのか知りたいのですが。

— Paran0a

3

@blonfu、すべてのブラウザのデフォルト値はalign-items: stretch/ align-self: stretchです。各アイテムの周囲に境界線を追加して削除するとwrap、すべてのブラウザーですべてのアイテムが引き伸ばされます：codepen.io/anon/pen/oLXBVx?editors

— Michael Benjamin

わかりました。私はこれを学びましたが、Chromeと他のブラウザでは画像の動作が異なります。高さを定義しない場合、Chromeはアスペクト比を考慮しません。

@blonfu、はい。ブラウザーの不整合とより細かいレベルがあります。

— マイケルベンジャミン

365

align-selfデフォルト値はなのでストレッチですstretch。に設定align-selfしcenterます。

align-self: center;

こちらのドキュメントをご覧ください： align-self

— プラディープ
ソース

はい、しかし他のブラウザは画像のアスペクト比を管理しています。Chromeはimgでフレックスベースを適用していません

9

align-self: start;画像は、スタイルのない画像（CSSなし）のように、コンテナーの上部（中央ではなく）の上部に垂直に配置する必要があるため、より強力な答えになると思います。どちらの方法でも、両方の答えがストレッチを修正します。したがって、それはもちろんOPが何を望んでいるかに依存します-OPの投稿からその「垂直方向に中央揃えされた」印象を得られなかっただけです。

— ヒキガエル

画像の幅を定義せずにflex-container内にある場合、100％に拡大されます。align-self: [flex-start, center...others]画像がflex-containers幅の100％を占めるのを防ぎます。align-self:centerもちろんそれを修正しますが、イメージをコンテナの使用の最初または最後から開始したい場合align-items: flex-start or flex-end

— cacoder

1

align-items: center親に（または必要に応じて任意の配置）を配置することもできます。

— Electrovir

16

キー属性はalign-self: center次のとおりです。

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

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

スニペットを展開

— ドリアン
ソース

1

財団のメニューでも同じ問題に直面しました。 align-self: center;うまくいきませんでした。

私の解決策は、画像を <div style="display: inline-table;">...</div>

— イサピル
ソース

2

ただし、フレックスボックスについてです。

これは flexboxのソリューションです。画像とdivはflexboxコンテナー内にあります。

— isapir

0

`margin`画像を配置するための追加：

をにしたかったimageためleft-aligned、以下を追加しました。

img {
  margin-right: auto;
}

同様のためimageであることをright-aligned、我々は、追加することができますmargin-right: auto;。スニペットは、両方のタイプの配置のデモを示しています。

幸運を...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

スニペットを展開

— アカシュ
ソース

0

align-selfのデフォルト値はストレッチなので、ストレッチです。この場合、2つの解決策があります：1. set img align-self：center OR 2. set parent align-items：center

img {

   align-self：中央
}

または

.parent {
  align-items：center
}

— モハメド・アリ
ソース

フレックスボックスがアスペクト比を維持するのではなく、なぜ画像を引き伸ばすのですか？

margin画像を配置するための追加：

`margin`画像を配置するための追加：