手机浏览器中如何等比缩放显示图片？

Question

比如有个红色的图片居中显示，如下

换个分辨率的手机就这样显示了：

对比

如何设置图片大小，以适应屏幕的宽度呢？比如小屏幕就缩小居中。

难道要计算出一个缩放比例，每张图片的大小都根据这个比例来变化吗？好繁琐啊，有没有这方面的CSSJS库（轻量级）可以方便的解决？我只是做个H5的信息展示页面，要求不是太高。

Answer 1

大的往rem适配上来。这个可以去搜一下，大概就是用一个大小随屏幕宽度变化的单位做单位。

小的来说用百分比写宽度,父元素宽度的百分之多少。我看你的父元素是适应屏幕宽度的。

Answer 2

用 vw 单位.
1vw = (窗口宽度 / 100)

更详细可以看下这篇文章
https://www.w3cplus.com/css/s...

Answer 3

图片可以放到七牛上去，然后加载的时候计算裁剪，七牛有工具。