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

问题描述

问 题

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

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

对比

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

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

解决方案

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

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

这篇关于css - 手机浏览器中如何等比缩放显示图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！