Question

我的页脚中有width:1363px和height: 100px的图片。这在我的桌面计算机上看起来很好，分辨率为1366 * 768但是当我检查网站的分辨率为1024 * 768时，图像的大小并没有缩小。

所以我的问题是如何使用css根据屏幕大小调整图像的大小。我使用了媒体查询并更改了图像的宽度和高度，但它仍然保持不变。我还尝试了其他一些没有运气的技巧。

Answer 1

您只需将图片设置为width: 100%，它就会随浏览器缩放。

Demo JS Fiddle

<强> HTML

<div id="footer">
    <img src="~/yourimage.jpg" />
</div>

<强> CSS

#footer img{
    width: 100%;
}

没有看到您的图像，很难建议，但另一种方法是不使用全宽图像而是使用背景颜色：

或使用水平重复图像：

Answer 2

尝试

img{width: 100%; max-width: 1363px;}

这应该会根据浏览器的大小缩小图像，但不会在高于最大宽度的分辨率下扭曲图像。

Answer 3

您可以使用css bootstrap响应。 http://getbootstrap.com/css/

根据屏幕尺寸缩小div的内容。

但是如果你想手动完成，请将页脚内容的宽度设置为（示例）

width:100%

然后为页脚设置特定大小（示例）

width:1024px

实施例

@media all and (max-width: 1024px) and (min-width: 768px){
  #footer{
   width:800px; //or something like this
    }
}

Answer 4

你把那个图像放在容器标签中，之后给出一个宽度为t0的图像，并使该图像的高度自动。