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

Question

我有一组图像，我在 HTML 中为其指定了明确的宽度和高度属性，以便在加载页面时为它们保留 space（这避免了页面 "jumps" 当图像加载时间更长时）。

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

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

问题：一旦我在 CSS 中设置 height:auto，space 因为图像在页面加载期间不再保留，我得到页面 "jumps" 影响。如果我删除 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 * 图片宽度/图片高度

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

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

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

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

Limit resizing of images with explicitly set width and height attributes

html

css

image