html - 较小浏览器中的图像

Question

http://graduateland.com/

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

以那个网站为例，当屏幕尺寸改变时，图像尺寸不会受到影响，只有图像的位置会改变。我怎么做？

当前的 CSS

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

Answer 1

如果您希望在窗口缩小时调整图像大小，只需更改您发布的 CSSheight: 500px即可。height: auto这将迫使图像随着变化而保持其原始比例width。您的代码现在的工作方式是它水平调整图像的大小，因此它永远不会比其容器宽，但具有固定的高度，一旦它开始水平收缩，就会弄乱纵横比。

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

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

Answer 2

在您链接的网站上，他们正在应用此 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 3

使用@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 4

答案是： 带有 CSS 的响应式图像

CSS：

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