绝对定位容器中的响应式图像问题答案

【问题标题】：Problems with responsive images in absolute positioned containers绝对定位容器中的响应式图像问题
【发布时间】：2017-04-20 08:23:06
【问题描述】：

我在尝试使用这个幻灯片插件时有点卡住了：

https://github.com/iamvery/galleriffic

我用这个是因为它有分页功能。

不管怎样，

问题是容器必须是 position: absolute 这意味着我必须给它一个高度，以便下面的元素尊重它的高度。

问题在于图像。我希望他们能够响应。

所以基本上我想使用 max-width: 100%;.

问题显然是如果我的容器是 600 像素高并且我的图像是响应式的，那么我的图像高度将在 600 像素以下减小并留下空白。

我尝试让 img 宽度为 100% 但高度固定，但随后它们会随着您调整浏览器大小而倾斜。

我不确定是否有解决方案。

有什么想法吗？

这里的例子：

https://jsfiddle.net/u08vrpt2/

HTML

<body>
    <div class="image">
        <div class="image__item">
            <img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
        </div>
    </div>
</body>

CSS

.image {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    height: 500px;
    background: grey;
}

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

img {
    max-width: 100%;
}

【问题讨论】：

标签： html css

【解决方案1】：

为什么容器需要是绝对的？如果我们删除它，您仍然有相同的行为

.image {
  position: relative;
  max-width: 1200px;
  background: grey;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

<div class="image">
  <div class="image__item">
    <img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
  </div>
</div>
<p>This text respect the image height</p>

【讨论】：

因为如果我删除它，插件不会正确加载图像。当您转到每张幻灯片时，它会跳。