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

Question

我有一组图像，我在 HTML 中为其指定了明确的宽度和高度属性，以便在加载页面时为它们保留空间(这避免了页面在图像加载时间较长时“跳转”)。

另一方面，我不希望图像占用的空间超过视口(viewport)的可用宽度。因此，如果视口(viewport)太窄，图像应该调整大小。为此，我添加了以下 CSS 样式:

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

问题:一旦我在 CSS 中设置了 height:auto，在页面加载期间不再为图像保留空间，我得到了页面“跳跃”效果。如果我删除 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 中设置)

通过这个我实现了预期的行为:初始加载时没有页面跳转，并且自动调整大小(保持纵横比)用于窄视口(viewport)。