腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

手机端图片不能自适应解决方法_织梦58

0
回复
522
查看
[复制链接]

690

主题

704

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
31818
     紫钻仅向指定用户开放  
发表于 19-1-30 13:54:47 | 显示全部楼层 |阅读模式
今天一个朋友向请教说,他公司网站图片手机端不能自适应,很不美观,叫球球发帮忙看看。9 j" W( e' D5 j! H# e
2 ]5 D8 u' R) t8 ?# f: D- e
5 ]7 |4 w$ b- p
        经过球球发研究发现,问题其实很简单。* y/ y( l6 k6 r0 `' i1 o+ p2 c
        找到对应的CSS文件。将图片的宽度属性设为100%即可,至此问题解决。
( o/ y2 w# u" V1 ?1 d( J3 o! K        img {( N5 U/ H- [. X
        border: 0;/ e4 L5 u: q3 k6 [5 q. b* ?8 G
        width: 100%;【此为球球发多加的】* R8 a9 {: }. e
        display: block;' l5 @. Y" J5 ]. k. s6 q% I  j, Y
        }
$ B# H1 Z* m' e        这样也有一个问题,全部手机站里的图片宽度都成width:100%了。1 P1 o! I; a& t
        可以通过外围div的class精确控制。# l  T3 S8 B0 Y
        比如:6 S! @# k. r" E) n
       
. ?; K3 e" n# x" `3 f& P
& C! l+ C. y+ E3 w[mw_shl_code=html,true]<div class='test'>5 i6 d1 d4 P, S/ T1 I
<img src='手机站展示的图片路径'/>
% P' [2 N4 d( z7 o. U0 U; h</div>[/mw_shl_code]. V% Z; _7 u) P  I% j3 T' t

" O0 r3 l* H, j  ~( B4 I( T        则可以这样定义:
5 v) v0 K2 U, z/ L! o; d3 ?. G        .test img{width: 100%  !important; height:auto  !important;}; a5 O; g' G! i2 _% J* B" k% D% ~. y
         上面的!important表示强调优先级别。因为有些图片格式是自带宽高限制的。
2 A- e* t: L: f  l& V        完美。。, K& c& z7 O& R0 h- C

qiuqiufa.com

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除