Question

我的flexbox有问题。里面的图像应该适合外盒而不会溢出。第一个和最后一个完美，但第二个溢出在顶部和底部。

我该如何解决这个问题？

＆＃13;

.outer {
    border: 1px solid red;
    margin: 25px;
    width: 160px;
    height: 160px;
	
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer img {
    max-width: 100%;
}

＆＃13;

<div class="outer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" />
</div>

<div class="outer">
    <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" />
</div>

<div class="outer">
    <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" />
</div>

＆＃13;

Answer 1

这是因为第二张图像的高度大于宽度。第一个和第三个图像的宽度大于或等于高度，因此受max-width: 100%;约束，这确保它们永远不会超过父容器的宽度。

要修复，请对css进行以下更改：

将max-height: 100%;添加到.outer img - 这将确保图片的高度永远不会超过容器的高度

.outer {
  border: 1px solid red;
  margin: 25px;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer img {
  max-height: 100%;
  max-width: 100%;
}

<div class="outer">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" />
</div>

<div class="outer">
  <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" />
</div>

<div class="outer">
  <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" />
</div>

Answer 2

您应该在CSS中插入图片，这样做会更容易。

.outer {
    border: 1px solid red;
    margin: 25px;
    width: 160px;
    height: 160px;
}

#pengo {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png');
}

#blue {
    background-image: url('http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png');
}

#tumblr {
    background-image: url('http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg');
}

HTML

<div id="pengo" class="outer"></div>
<div id="blue" class="outer"></div>
<div id="tumblr" class="outer"></div>

然后使用background-position和background-size（请参阅MDN）进行播放，例如：

background-position: center;
background-size: cover; /* or contain*/

img in flexbox溢出在顶部和底部

2 个答案: