基于屏幕分辨率调整图像大小的简单方法



我已经寻找了这个需求的解决方案,但还没有找到。

我想在多个移动设备(如iPhone 4/5, iPad 3/4和Android设备)上的HTML页面中显示230(宽)x 390(高)的图像。

目前图片在iPhone4上显得太大,在iPad3上显得太小。

如何根据屏幕大小显示这些图像?

如果这意味着图像会在更大的屏幕上被拉伸,并且不那么清晰,这是可以的。

使用background-size:contain,div的背景图像将拉伸以填充容器。

background-size:包含;

所以如果你想使用媒体查询:

[1]: http://jsfiddle.net/5hTkf/

这个例子没有视网膜显示处理,但是这里有一篇关于处理的文章:

相关内容

  • 没有找到相关文章

最新更新