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

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

4
回复
1294
查看
[复制链接]

765

主题

779

帖子

3万

积分

董事

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

积分
33029
发表于 19-1-30 13:54:47 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
今天一个朋友向请教说,他公司网站图片手机端不能自适应,很不美观,叫球球发帮忙看看。+ O) v2 T8 x/ _9 Y1 _5 P/ N# Q

" M- I2 [% T  C' _) q  W# Z4 `; M; ?- Y3 j
        经过球球发研究发现,问题其实很简单。9 }8 A% F- f0 }" F" `
        找到对应的CSS文件。将图片的宽度属性设为100%即可,至此问题解决。
6 k" \$ f8 L9 g0 C4 U9 h        img {$ B+ P5 h3 B$ _/ w  H! O; |
        border: 0;( b# G4 h  `( }
        width: 100%;【此为球球发多加的】
8 Z$ C& U4 X; w4 [! z; T5 V        display: block;
0 Z1 P+ @, j: Z! k. T        }
. G( |7 b8 u$ j! k        这样也有一个问题,全部手机站里的图片宽度都成width:100%了。2 @/ x  k5 e& z# P
        可以通过外围div的class精确控制。) @1 C' B3 s+ l3 Z: E
        比如:
- _. p: g. m# I        1 c0 n3 w8 O  I4 A

: J3 o/ P! g5 H" p6 F( `[mw_shl_code=html,true]<div class='test'>
) d: e5 W2 v* h" ^, w7 M<img src='手机站展示的图片路径'/>& r4 }5 k$ f( A( _
</div>[/mw_shl_code]
  d9 k& i  I, [+ f9 y% N6 r% \6 [& ~- }) {0 K
        则可以这样定义:, F0 Q0 b; C# q5 c' m
        .test img{width: 100%  !important; height:auto  !important;}
; O% R1 x( N( f. ^  |3 C4 g         上面的!important表示强调优先级别。因为有些图片格式是自带宽高限制的。
- o7 j! ?" x* d        完美。。3 J, m  e( r% \4 X! q1 H! C

0

主题

10

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-9-25 21:42:14 | 显示全部楼层         
沙发!沙发!
回复

使用道具 举报

1

主题

10

帖子

25

积分

1°伸手党

Rank: 2

积分
25
发表于 19-11-7 00:31:21 | 显示全部楼层         
这是什么东东啊
回复

使用道具 举报

0

主题

7

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-1-2 21:19:45 | 显示全部楼层         
不知该说些什么。。。。。。就是谢谢
回复

使用道具 举报

0

主题

5

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-1-21 01:18:15 | 显示全部楼层         
我是来刷分的,嘿嘿
回复

使用道具 举报

网站简介

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