Flexbox不包含整个图像（CSS）

Posted 2021-04-12

我正在制作一张带有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>

答案

将您的图片css设置为：

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

Flexbox将负责其余部分

另一答案

我不确定我是否完全理解你的风格如何显示图像。如果设置宽度：50％;对于图像，你有3个，而不是所有三个都没有空间适合父div（加上每个的7.5％的边距）。另外，我看到你想要它们之间的空间。你使用7.5％的保证金，但你可以使用justify-content：space-between;在电影上，它会有同样的效果，但更好。作为解决方案，我建议设置宽度：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;
}