html - css - 自动调整图像大小以适合屏幕(无需 Javascript)

Question

所以，我有一个艺术网站，每件作品都有自己的页面。这些作品大部分是照片，这意味着它们的分辨率比大多数屏幕能够显示的分辨率更高 - 因此显然它们需要按比例缩小。

为了使作品更容易浏览，我将它们显示为占据大部分屏幕(任一维度减去 100 像素)，缩放以填充更受限制的维度:

• Work X 是方形的，在普通显示器上，它会调整大小，使其高度填充整个垂直空间，并且其宽度也会相应缩放 - 保持宽高比
• 作品 Y 呈挂毯形状，并调整其大小以使其宽度填满整个水平空间，并调整其垂直空间的大小以匹配该纵横比。

我目前为此使用一个简单的 Javascript 脚本，调用 img 标记的 onload 上的函数(以及每当调整窗口大小时)来计算图像的所需宽度/高度并应用它。使用 Javascript 实现此目的的问题是，图像开始加载和调整大小之间存在延迟，这使得页面在一段时间内看起来非常难看，尤其是在较差的浏览器上查看网站时。互联网连接。

引出了我的问题:有没有办法在纯 CSS 中将图像大小调整为屏幕尺寸的一定百分比，同时保持宽高比？

This answer提供了另一种 Javascript 解决方案，但如果可能的话，我更愿意找到一种在纯 CSS 中执行此操作的方法。

---

我当前的脚本是这样的:

function setGoodHeight (element) {
    if( on mobile ) {
        ...
    }
    else {
        height_buffer = 100
        width_buffer = 100
        height_diff_pct = element.naturalHeight / window.innerHeight
        width_diff_pct = element.naturalWidth / window.innerWidth
        if(height_diff_pct > width_diff_pct) {
            var h = element.naturalHeight;
            var w = element.naturalWidth;
            element.height = window.innerHeight - height_buffer;
            element.width = w * element.height / h;
        }
        else {
            var h = element.naturalHeight;
            var w = element.naturalWidth;
            element.width = window.innerWidth - width_buffer;
            element.height = h * element.width / w;
        }
        if(element.width < 540) {
            element.parentNode.setAttribute("style","width:" + 540 + "px");
        }
        else {
            element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
        }
    }
}

Answer 1

通过在 CSS 中使用 vw 和 vh 单位，您可以根据浏览器视口(viewport)而不是父元素来调整内容的大小。

如果您为图像设置max-width和max-height，它应该限制图像不大于任何浏览器尺寸的浏览器视口(viewport)尺寸。

#image-id {
    max-width: 80vw;
    max-height: 80vh;
}