自适应网页对于图片宽度处理的问题，width:100%好像不完美

Question

在做自适应网页时，大家是如何处理图片的宽度的?
比如一个视口为320的手机，
我有2张正方形图片，第一张宽度是900px，第二张是50px
对于图片处理的代码是img{width:100%;max-width:640px;}
于是问题来了，900px的图片宽度被等比缩小到320px;
但是那张50px的图片却被拉伸到了320px,所以，对于那些宽度比320小的图片，大家在自适应网页里，是如何处理的？

Answer 1

这还能怎么处理。。不想图片自适应拉伸的话就是max-width:100%,想图片都统一拉升的话就用width:100%...

Answer 2

如果在img外面套一个div就好办了，可以参考 bootstrap 根据不同的屏幕大小给div设置不同的宽度。

Answer 3

一般来说宽度设成100%的话，要么有个固定的宽度的外层，要么就是比较大的图。

Answer 4

你可以参考美团：http://i.meituan.com/ 和大众点评:http://m.dianping.com/。
这些小商品图片（基本不超过320px宽度），有的经过css的宽高压缩了，有的直接卡死宽高。
所以，对于你说的50px的，你宽高就限制成50px就成了。

Answer 5

加上max-width:图片的物理宽度

Answer 6

想问下，手机页面中，设置字体和图片px和em的区别