根据分辨率调整图像大小

Question

我一直在1440 * 900分辨率显示器上开发一个网站。该页面有很多图像以网格结构排列。它们之间的图像大小和空间是根据我使用的显示器设置的。但是当我在1280 * 800屏幕分辨率监视器中测试时，图像出现对于屏幕来说太大了（正如预期的那样）!! 任何人都可以建议如何根据用户的屏幕分辨率调整图像大小和它们之间的空间。 感谢名单..

Answer 1

您可以结合使用css媒体查询并在css中设置图像的宽度。因此，对于屏幕尺寸最大宽度为1440，css图像宽度将设置为width: 200px;。然后，对于屏幕尺寸最大宽度为1280，将图像宽度设置为其他值，例如width:120px

这是一个不错的媒体查询教程：http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 2

您还可以尝试相对于父容器设置图像的宽度百分比。例如

<div class="imgWrapper">
<img src="something.jpg">
</div>

然后在css中：

.imgWrapper img {
width:100%;
}

如果图像的宽度不变，不同部分的宽度不同：

除宽度外还添加最大宽度：100％;