0

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

它似乎在 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/

4

3 回答 3

0

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

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

于 2013-03-20T18:02:32.463 回答
0

我只是在解决同样的问题！

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

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

于 2013-05-27T01:09:53.733 回答
0

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

于 2013-03-20T17:58:47.580 回答