Question

如何防止图像压缩。当我缩小浏览器窗口的大小时，图像会被侧面压缩，就像被压缩的人头一样。

以该网站为例，当屏幕尺寸发生变化时，图像尺寸不受影响，只有图像的位置发生变化。我该怎么做？

当前CSS

position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;

Answer 1

如果您希望在窗口缩小时调整图片大小，只需在您发布的CSS中将height: 500px更改为height: auto即可。这将强制图像保持原始比率width更改。你的代码现在的工作方式是它水平调整图像的大小，使它永远不会比它的容器宽，但是有一个固定的高度，一旦开始水平收缩就会影响宽高比。

如果您希望图像保持相同的大小并且只是在浏览器窗口缩小时移动位置，则需要将它们应用为background-image。在要将图像背景应用于的容器div上尝试此CSS代码：

#container {
    background: url(path/to/image.jpg) no-repeat center top;
}

Answer 2

使用@media，例如：

@media screen and (max-width: 1280px) and (max-height: 1024px) {
    .splash {
        background-image: url('../img/splash-1280.jpg');
    }
}
@media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
    .splash {
        background-image: url('../img/splash-1920.jpg');
    }
}

在他们的CSS中：

@media (max-width: 1280px)
    [id="get-started"] {
    background-size: auto;
    background-position: center top;
}

哪个覆盖：

background-position: center center;
background-size: 100%;

Answer 3

在您关联的网站上，他们正在使用此CSS

display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;

到div上。但是有很好的检查员工具可以为你检查，所以不要问你是否有一个“生活”的例子。

您应该特别了解背景属性。

Answer 4

这是答案： Responsive Images with CSS

CSS：

max-width:100% !important;
height:auto;
display:block;

较小的浏览器中的图像

4 个答案: