较小浏览器中的图像

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

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

当前CSS

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

来源

2013-10-03 CodeGuru

检查元素是您的朋友 – allen213

注意：注意术语“压缩”。在网络世界中，它通常意味着“如果可能，缩小一个项目的大小（以字节为单位），而不会损失太多质量”。 –

使用@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%;

来源

2013-10-03 15:07:02 Halcyon

谢谢，我会考虑这个，但嗯，我仍然想知道其他网站是如何做的，它就像图像不会改变，只是图像的视图较小 – CodeGuru

是的，看看他们的CSS。 – Halcyon

我看到的唯一区别是我有一个img标签，他们不。这会影响吗？ – CodeGuru

在该网站上您链接它们appyling这个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。但是有很好的检查工具可以检查你的情况，所以不要问你是否有一个“活的”例子。

你应该特别看看背景属性。

来源

2013-10-03 15:10:20 idmean

我认为它的症结是背景大小：100％ – allen213

这里的答案： Responsive Images with CSS

CSS：

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

来源

2013-10-03 15:13:41 nilobarp

试过这个，嗯，我真的不希望图像移动：\谢谢XD – CodeGuru

如果您想在窗口缩小图像调整大小，只是改变height: 500px到height: auto在您发布的CSS。这将迫使图像保持其原始比例，因为width发生变化。你的代码现在工作的方式是它水平调整图像的大小，因此它永远不会比它的容器宽，但是有一个固定的高度，一旦它开始水平缩小就会扰乱宽高比。

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

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

来源

2013-10-03 15:34:36 Ennui

较小浏览器中的图像

回答

相关问题