Flexbox不包含整个图像（CSS）

Question

我正在制作具有flexbox属性的影像胶片，以使用我自己的滑块脚本。问题是当我检查.film div时，它没有正确包含整个图像，如下所示：

如您所见，图像属于.film div。但是，它仅包含一小部分图像。我希望.film div覆盖所有图像。

有什么办法可以解决这个问题？

这是代码：

.outer {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
  left: -130%;
  margin-top: 10px;
  flex-grow: 1;
}
.images {
  position: relative;
  display: block;
  width: 50%;
  margin: 0 7.5%;
  flex-shrink: 0;
  padding-bottom: 50%;
  background-color: blue;
  background-image: url('CovercefwM.jpg');
  background-size: cover;
  background-position: center center;
}

    <div class="outer" draggable="false">
      <div class="film" draggable="false">
        <a class="images" href="#" draggable="false">
          <!-- <img src="CovercefwM.jpg" alt=""> -->
        </a>
        <a class="images" href="#" draggable="false">
          <!-- <img src="Coverdefw.jpg" alt=""> -->
        </a>
        <a class="images" href="#" draggable="false">
          <!-- <img src="Covercefw.jpg" alt=""> -->
        </a>
      </div>
    </div>

Answer 1

将图片的CSS设置为：

img {
    display: block;
    width: 100%;
}

Flexbox将负责其余的工作

Answer 2

我不确定您是否完全了解您希望如何显示图像。如果设置宽度：50％；对于图像，您有3个，那么这三个空间就没有足够的空间可容纳父div（每个区域的利润率为7.5％）。另外，我看到您希望它们之间留有间隔。您使用了7.5％的保证金，但可以使用justify-content：在电影上，它将具有相同的效果，但效果更好。 作为解决方案，我建议将宽度设置为30％；并为.images删除7.5％的边距，而是设置justify-content：space-between; .film将为您提供所需的间距。 我希望这是您真正想要的结果。 这是更正的CSS：

.outer {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  left: -130%;
  margin-top: 10px;
  flex-grow: 1;
}
.images {
  position: relative;
  display: block;
  width: 30%;
  margin: 0;
  flex-shrink: 0;
  padding-bottom: 50%;
  background-color: blue;
  background-image: url('CovercefwM.jpg');
  background-size: cover;
  background-position: center center;
}