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

为此使用background-size: cover;怎么样？每个图像都可以是div的背景，而height则设置了以下属性。

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

Answer 2

告诉您图像最大容纳容器宽度的100％，并将高度设置为auto可以保持宽高比。

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

Answer 3

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

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

}

这是一个类似的问答：StackPost

Answer 4

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

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

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

css-自动调整图像大小以适合屏幕（不使用Javascript）

4 个答案: