时间戳

首页 > 解决方案 > Flexbox 不包含整个图像 (CSS)

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

问题描述

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

在此处输入图像描述

如您所见，图像属于.filmdiv。但是，它只包含一小部分图像。我希望.filmdiv 涵盖所有图像。

有没有办法解决这个问题？

这是代码：

.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>

标签： javascripthtmlcssflexboxslider

解决方案

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

推荐阅读