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

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

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

763

主题

777

帖子

3万

积分

董事

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

积分
32946
发表于 19-1-30 13:54:47 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
今天一个朋友向请教说,他公司网站图片手机端不能自适应,很不美观,叫球球发帮忙看看。  z# h  l  q( b

. p/ i' d- z9 x9 R: v; S, b: m, d- W3 L
        经过球球发研究发现,问题其实很简单。3 A' ?& q, L% K8 U$ }. J. ?
        找到对应的CSS文件。将图片的宽度属性设为100%即可,至此问题解决。
( Q* M8 g" y; v' y) |2 G/ Y        img {
$ \* }, U4 n9 r0 b# V3 C        border: 0;$ O: c# F9 O. [+ M- [, o, ?
        width: 100%;【此为球球发多加的】
% X0 i1 g; I* O        display: block;0 }; X$ E' D* k4 V! v' ?
        }1 Q# ^$ B, b  V
        这样也有一个问题,全部手机站里的图片宽度都成width:100%了。
+ W. }4 `  K- w, b, o! ?+ s        可以通过外围div的class精确控制。
" `( s9 o" l0 O0 S# c2 }# d# v        比如:& q8 A3 y, M& y' [& D: E& q( {( J" w
        / p5 V- i" X# [5 A- v
7 E% Y( r4 W/ r3 K
[mw_shl_code=html,true]<div class='test'>  E/ d( ~1 Y3 ?: T7 w. F% I- x
<img src='手机站展示的图片路径'/>
1 e8 x( c  w# J' i/ E</div>[/mw_shl_code]
; T) s$ @7 [- s
* u2 v0 M2 @8 ?* N" d' N  Z, t        则可以这样定义:9 w5 j4 J1 I+ U6 N7 y
        .test img{width: 100%  !important; height:auto  !important;}& d, U2 Z3 {% K; W' _
         上面的!important表示强调优先级别。因为有些图片格式是自带宽高限制的。& [7 S6 Y5 L$ M* `/ a
        完美。。( k/ ]. k: M7 l: C& n2 L8 L

0

主题

8

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

1

主题

7

帖子

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
发表于 5 天前 | 显示全部楼层         
我是来刷分的,嘿嘿
回复

使用道具 举报

网站简介

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