根据分辨率调整图像大小

Adjust image sizes based on resolution

本文关键字：图像 调整 分辨率      更新时间：2023-09-26

我一直在1440*900分辨率的显示器上开发一个网站。。页面上有许多以网格状结构排列的图像。图像大小和它们之间的间距是根据我使用的监视器设置的。。但当我在1280*800屏幕分辨率的显示器上测试它时，的图像似乎对屏幕来说太大了（正如预期的那样）！！有人能建议如何根据用户的屏幕分辨率调整图像大小及其间距吗。。Thanx。。

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

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

然后在css中：

.imgWrapper img {
width:100%;
}

如果你的图像上有恒定的宽度，不同部分有不同的宽度：

在宽度之外添加最大宽度：100%；

您可以使用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/

相关文章：