web-dev-qa-db-ja.com

フレックスボックスがイメージを拡大するのはなぜですか？

Flexboxは、画像を自然な高さに引き伸ばすような動作をします。別の言い方をすれば、子画像のあるflexboxコンテナを持っていて、その画像の幅を変更しても、高さはまったく変更されず、画像は引き伸ばされます。

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

そしてこのスタイルシート

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

私が意味を説明するために This codepen を追加しました。何が原因ですか？

htmlcssflexbox
111
sjbuysse

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

align-self: center

こちらのドキュメントを参照してください。 align-self

255
pradeep1991singh

キーは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>
7
Dorian

財団のメニューについても同じ問題に直面しました。 align-self: center;は私のために働きませんでした。

私の解決策は画像を<div style="display: inline-table;">...</div>でラップすることでした

1
isapir

画像を整列させるために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
Akash

フレックスコンテナ内に存在する画像に表示ブロックを使用する

0
Mohamed Abo Elmagd