在Html中设置图片等宽等高,移动端图片处理，设定最大宽度，高度等比处理（纯CSS）...

我是在给自己PC站博客做移动端适配，遇到了共用PC站内容，里面有时候会有图片，PC端是通过最大宽度来限制。如今要增加移动端适配，总不能重新调整图片大小吧，就利用CSS来限制图片在移动端的宽度，高度自适应。以下博文为引用。确认有效！

有这样的应用场景：

PC端和移动端共用了控制器，但是他们的html渲染是不同的，那么在PC后台里录入的一些图片咋整，有的图片在 img 标签里被编辑器定义了宽高，一般CSS影响不到

思路：

移动端处理这个问题时，首先应该保证img的最大宽度不能超过屏幕大小，不然就会显示不全，所以应该定义max-width。

假设移动端宽度 640px，编辑器中有图片 img src="xx" style="width:1000px;height:500px;"  那么我们看到由于受max-width影响，宽度变成了最大640px,但是高度还是500哎，于是图片变形了

有人会说，我可以用js来控制它的高度的，通过算取原来的宽高比，然后缩放和保持这个比例就可以了。

亲测可用，我以前也是这么做的。但是我们要是能去掉它的高度属性，那么高度不是自动跟着变的么？这样通过纯css就能处理了，不需要再引入一段js代码了。

看这里：.content_art img {

height: auto !important;

max-width: 100% !important;

}

真正解决了移动端共用PC端文章内容及图片，又不用javascript脚本来控制，代码短还有效。又保持比例，感谢CSDN博客ROVAST的做贡献！