Question

尝试使用此幻灯片插件时，我有点卡住了：

https://github.com/iamvery/galleriffic

我正在使用它，因为它有页面分页。

反正

问题是容器必须是位置：绝对意味着我必须给它一个高度，以便下面的元素尊重它的高度。

这个问题是图像。我希望他们能够做出回应。

所以基本上我想使用max-width：100％;。

问题显然是如果我的容器高达600px并且我的图像响应那么我的图像高度将减少到600px以下并留下空白区域。

我已尝试将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%;
}

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

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

1 个答案: