为什么flexbox拉伸我的形象？ [英] Why does flexbox stretch my image?

问题描述

Flexbox具有将图像拉伸到自然高度的行为。在其他（更具体的）单词中，如果我有一个带有子图像的flexbox容器，并且调整了该图像的宽度，那么高度根本不会调整大小，并且图像被拉伸。

 < div> 
< img src =https://loremflickr.com/400/300> 
< h4> Appify< / h4> 
< p>一些文字< / p> 
< / div> 
  

和这个样式表

  div {
 display：flex; 
 flex-wrap：wrap; 
 
 img {
 width：50％
} 
  

我加了这个codepen 来说明我的意思。
是什么引起的？

解决方案

$ c>默认值是 stretch 。
Set align-self to center 。

< pre $ align-self：center


b $ b align-self

Flexbox has this behaviour where it stretches images to their natural height. In other (more specific) words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn't resize at all and the image gets stretched.

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

And this stylesheet

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

I added This codepen to demonstrate what I mean. What causes this?

解决方案

It is stretching because align-self default value is stretch. Set align-self to center.

align-self: center

See doc here: align-self

这篇关于为什么flexbox拉伸我的形象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！