欢迎您来到,码代码-李雷博客        登录  |  注册

移动端图片处理,设定最大宽度,高度等比处理(纯CSS)

更新:2020-03-12 13:28:10
人气:4895
来源:本站整理
A+

我是在给自己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的做贡献!

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  本站PHP博客源代码下载
  本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架,现已免费开源共享提供给大家下载!
PHP博客下载
  联系博主
QQ:858353007   个人微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2020 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号