css - 自动调整图像大小以适应屏幕（无 Javascript）答案

【问题标题】：css - Automatically resize image to fit on screen (without Javascript)css - 自动调整图像大小以适应屏幕（无 Javascript）
【发布时间】：2019-05-08 16:26:48
【问题描述】：

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

为了让作品更易于浏览，我将它们显示为占据屏幕的大部分（在任一维度上减去 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");
        }
    }
}

【问题讨论】：

您是否尝试获取屏幕尺寸，然后将照片设置为该尺寸？
是的，基本上我的脚本得到window.innerWidth和window.innerHeight，计算图像宽度/高度与窗口宽度/高度之间的比率，并取较小的比率，然后调整整个图像。
您是否尝试过在 CSS 中使用 vw 和 vh 单位？ 100vw = 100% of browser viewport width。使用height: auto; 也可以保留纵横比。
贴出你目前拥有的HTML和代码。
我已经发布了 javascript 代码。在这种情况下，HTML 实际上只是一个 img 标记。

标签： html css

【解决方案1】：

在 CSS 中使用 vw 和 vh 单位允许您根据浏览器视口而不是父元素来调整大小。

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

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

【讨论】：

【解决方案2】：

为此使用background-size: cover; 怎么样？每个图像都可以是div 的背景，而div 又具有以下属性集。

height
width
background-size: cover;
background: url('img.png') center center no-repeat;

【讨论】：

有没有办法通过html在运行时提供url？我有一个模板化的 .html 页面（所以我在提供页面时填充了图像源）但是一个静态的 css 文档，并且在 style 属性中填充了这一切都不起作用。
另外，当我对此进行测试时，它似乎并没有达到我想要的效果。水平缩放有效，但垂直缩放无效，并且图像没有缩放，它只是被切断了。

【解决方案3】：

告诉您的图片最多为它们所在容器的 100% 宽度，高度设置为 auto 将保持纵横比。

.my-image-class {
  max-width: 100%;
  height: auto;
}

【讨论】：

据我了解，如果容器是此处屏幕的宽度，则可以将图像调整为大于屏幕的大小 - 而我希望它根据高度进行缩放，如果这是案例
@GreenCloakGuy 没有提供 HTML 标记。图像周围的直接容器应设置为所需的宽度。我提供的代码简单有效，使图像符合要求。

【解决方案4】：

JavaScript 是最好的答案，但如果你真的只想使用 css，你可以使用百分比而不是 px，这些将缩放到给定的容器。

.img {
max-width:100%;  
max-height:100%;

}

这里有一个类似的问答：StackPost

【讨论】：