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

Question

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

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

• 作品 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;
}