Question

我有一个带有几个flexbox项目的flexbox，其宽度约为50％。 Flexbox项目包含一个或多个<p>元素或单个<img />。

带有图像的flexbox项目应该完全填充与图像，而不将其设置为周围div的背景。图像似乎总是在下方有一个小红条，即使图像填满整个宽度。如何使图像填充整个flexbox项目？

图像的宽高比是否会改变无关紧要。

我不仅希望图片下方的空白空间消失。我希望它能伸出来使用flexbox项目的全宽。所以它填充了flexbox项目。

.container {
  width: 500px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-item {
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;
}
img {
  max-width: 100%;
  background: white;
}

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

编辑：增加了重点。添加了更多解释。

Answer 1

将display:block添加到img：

＆＃13;

.container {
  width: 500px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-item {
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;
}
img {
  max-width: 100%;
  background: white;
  display :block
}

＆＃13;

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

＆＃13;

说明：默认情况下，img显示为inline和vertical-align:baseline，您看到的空间是基线下的空间。

您还可以将垂直对齐方式更改为middle;

在Flexbox中将图像缩放到最大尺寸

1 个答案: