我已经寻找了这个需求的解决方案,但还没有找到。
我想在多个移动设备(如iPhone 4/5, iPad 3/4和Android设备)上的HTML页面中显示230(宽)x 390(高)的图像。
目前图片在iPhone4上显得太大,在iPad3上显得太小。
如何根据屏幕大小显示这些图像?
如果这意味着图像会在更大的屏幕上被拉伸,并且不那么清晰,这是可以的。
使用background-size:contain,div的背景图像将拉伸以填充容器。
background-size:包含;
所以如果你想使用媒体查询:
[1]: http://jsfiddle.net/5hTkf/
这个例子没有视网膜显示处理,但是这里有一篇关于处理的文章: