移动网站的不同设备宽度上的图像大小

Question

我们如何在移动网站的不同设备上处理图像尺寸。

Answer 1

响应式设计是其中一个答案。您可以在http://en.wikipedia.org/wiki/Responsive_web_design

了解有关该概念的更多信息

这是关于使图像响应http://css-tricks.com/which-responsive-images-solution-should-you-use/

的非常好的帖子

当然，请浏览一下这个网站;）CSS - how to make responsive images

Answer 2

我想这取决于你在做什么，但其中一个是将图像放入容器中，然后将其作为该宽度的百分比。

例如：

<div id="myContainer">
<img id="myImage" src="myImage.jpg"> 
<div>

然后你的css可能是：

#myImage { width: 50%; }

然后它总是50％的myContainer宽度，在响应式设计中，它可能是你的视口的100％，为桌面浏览器设置了最大宽度，或者，它可以通过CSS媒体查询设置

就高度而言，现代设备浏览器会按比例将其设置为确定的宽度。