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

Question

我们如何为移动网站处理不同设备上的图像大小。

Answer 1

响应式设计是答案之一。您可以在此处阅读有关该概念的更多信息http://en.wikipedia.org/wiki/Responsive_web_design

这是一篇关于使图像响应的非常好的帖子http://css-tricks.com/which-responsive-images-solution-should-you-use/

当然，看看这个网站;) CSS - 如何制作响应式图像

Answer 2

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

例如：

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

那么你的CSS可能是：

#myImage { width: 50%; }

那么它总是 myContainer 宽度的 50%，在响应式设计中，它可能是视口的 100%，并为桌面浏览器设置了最大宽度，或者，它可以由 CSS 媒体查询设置。

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