Question

我正在尝试根据浏览器高度缩放图像。

它似乎在Chrome和Safari中运行，但是当我在Firefox中检查它时，图像仍保持其原始大小。

这是我到目前为止的代码。

HTML：

<div class="full-width">
    <div class="image-wrapper">
        <div class="images">
            <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" />
            <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" />
        </div>
    </div>
</div>

CSS：

.full-width {
    height: 100%;
    width: 100%;
    position: absolute;
}

.image-wrapper {
    position: absolute;
    right: 0;
    width: 50%;
    height: 55%;
    margin-right: 15px;
}

.images {
    position: absolute;
    right: 0;
}

.image-wrapper img {
    display: block;
    height: auto;
    max-height: 50%;
    width: auto\9; /* ie8 */
}

您可以在此处查看工作示例：http://jsfiddle.net/Pywak/

Answer 1

所有绝对定位都会打破比例尺寸计算。您的元素之间不再存在父/子关系。

Answer 2

当您调整浏览器大小或屏幕分辨率发生变化时，将position:absolute;没有position:relative;给予父容器总会让您陷入困境。

我建议您使用它们作为背景图片而不是img标签，然后使用background:contain; || background:cover;财产。

Answer 3

我刚刚解决了同样的问题！

由于百分比是相对于父元素的，因此直接父元素具有明确指定的高度是关键。因此，.images应该指定一个高度，以便其子项按百分比正确调整大小。

您还可以使用vh单位（相对于视口高度）调整高度，但要小心并使用后备，因为vh与所有浏览器都不兼容。

Firefox中的图像缩放问题

3 个答案: