Question

我有一组图像，我在HTML中指定了明确的宽度和高度属性，因此在页面加载时为它们保留了空间（这避免了页面＆＃34;跳转＆＃34;当图像占用时加载时间更长。）

另一方面，我不希望图像占用比视口可用宽度更多的空间。因此，如果视口太窄，则应调整图像大小。为此，我添加了以下CSS样式：

img.resizable {
    max-width: 100%;
    height: auto;
}

问题：一旦我在CSS中设置了height:auto，在页面加载期间就不再保留图像的空间，我得到了页面＆＃34;跳转＆＃34;影响。如果我删除height:auto，则如果图像调整大小，则不会保留纵横比。关于如何处理这个的任何建议？

如果可能，首选非Javascript解决方案。

Answer 1

我用来自this blog post的提示解决了这个问题，解释了如何使用CSS来设置流体元素的宽高比。

基本上解决方案如下：

<div style="width: [width]px; max-width:100%; position:relative">
    <div style="padding-top: [aspect]%"></div>
    <img style="position:absolute; top:0" src="...">
</div>

其中：[width] =图片宽度，[aspect] = 100 *图片宽度/图片高度

基本上，浏览器具有以下信息：

图像的初始宽度（通过width设置在外部div中）
宽高比（通过padding-top设置在内部div中）
调整大小行为（通过max-width设置在外部div中）

有了这个，我实现了预期的行为：初始加载时没有页面跳转，并且为窄视口自动调整大小（保持宽高比）。

使用显式设置的宽度和高度属性限制图像的大小调整

1 个答案: