html - 围绕图像的 Div 未在 flexbox 中调整大小

Question

我正在尝试让flexbox中的图像正确放大，他们这样做了。但是，这些图像有一个叠加图像，所以我创建了一个 div，图像和叠加层位于其中。但是，此 div无法正确缩放图像。它看起来像这样：（出于演示目的，我在其中一个 div 中添加了浅蓝色背景颜色）。

所有这些都在一个包含的 div 中。HTML 和 CSS 如下所示：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.imagecontainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
}

<div class="container">
  <div class="imagecontainer">
    <img src="image" class="image">
    <img src="overlay" class="image">
  </div>
  <div class="imagecontainer">
    <img src="image2" class="image">
    <img src="overlay2" class="image">
  </div>
</div>

现在我的问题是，如何获得与imagecontainer其中的图像一样宽的图像？我已经尝试了很多东西，但似乎没有什么能按我想要的方式工作。

提前致谢！

标签： htmlcss

Answer 1

希望以下有所帮助。我position: absolute;从第一个图像中删除，.imagecontainer以便该图像不会从正常布局流程中取出。此外，width: 100%;从.imagecontainer.

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.imagecontainer {
    position: relative;
    height: 100%;
}

.image, .overlay {
    max-height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

<div class="container">
  <div class="imagecontainer">
    <img src="image.jpg" class="image">
    <img src="overlay.jpg" class="overlay">
  </div>
  <div class="imagecontainer">
    <img src="image2.jpg" class="image">
    <img src="overlay2.jpg" class="overlay">
  </div>
</div>