javascript - Flexbox 不包含整个图像 (CSS)

Question

我正在制作一个带有 flexbox 属性的图像影片，以便使用我自己的 slider 脚本。问题是当我检查 .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 会处理剩下的事情