版权声明：支持技术共享 https://blog.csdn.net/qq_38350907/article/details/84098287
荆轲刺秦王
我们在做网站的时候 经常会遇到 这样的情况：网站的内容是 cms 系统后台用 富文本编辑器 填充的，这个时候，就有一个问题：当屏幕分辨率变成 750px 以下，也就是手机端的时候，后台用富文本编辑器填充的内容样式就会变化，最重要的是，在富文本编辑器里面添加的图片就会错位。我么来分析一下：
通常情况下，在 富文本编辑器 添加的内容一般都会自带一些 html 和 css ，这就导致我们在后台富文本编辑器里添加的图片是有固定宽高的，这个时候 我们需要图片能够 居中显示 并且 自适应屏幕大小
首先用到：@media(max-width:750px){}
我们所有针对手机端或者说屏幕分辨率在 750px 以下的样式 全都写到这个里面
其次给富文本编辑器内容的 img 添加样式：
background-size:contain;
width:90%;
height: auto;
margin: 0 auto;
display: block;这样一来，效果就像这样：
我们再来看看，PC端的样式：
这样设置，就可以使手机端和PC端看起来都很舒适。
我们来分析一下这个 ：
background-size:contain;
background-size 的属性还有很多，例如：cover
相同点：图片都是等比例缩放 换句话说就是：都是将图片以 相同宽高比 缩放以适应整个容器的宽高
不同点：
cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
可以看到：上面的效果是由：background-size:contain; 实现的。
具体使用那种 还需要根据自己的业务情况 来选择。