移动网站在不同设备宽度上的图片尺寸

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%; } 

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

就高度而言，现代设备浏览器会根据确定的宽度成比例地设置它。