微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

h5响应式图片保持百分比不变形不支持ie7

<table class="html5"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

>                         ul{                                 padding: 0;                                 margin: 0;                         }                         li{                                 width: 33.333%;                                 list-style: none;                                 float: left;                         }                         li div{                                 width: 100%;                                 position: relative;                                 padding-top: 70%;                         }                         img{                                 position: absolute;                                 top: 0;                                 left: 0;                                 height: 100%;                                 width: 100%;                         }                         >         >         >                 >                         >< >< aimg.cn/travel/2013/1114/U8822P704DT20131114142701.png"><><>                         >< >< aimg.cn/travel/2013/1114/U8822P704DT20131114142725.png"><><>                         >< >< aimg.cn/travel/2013/1114/U8822P704DT20131114142509.png"><><>                 >         >   >         >                 >                 ><>                 >                         p{      width: 30%;                                 width:calc(100% / 3 - 3px);                                 margin-right: 1px;                                 padding-top: 20%;                                 float: left;                                 background: url(http://ubmcmm.baidustatic.com/media/v1/0f000nYQae6t2iCMjPksts.png);                                 background-size: 100% 100%;                                 background-repeat: no-repeat;                                 border: 1px solid #ccc;                         }                         p:nth-of-type(2){                                 background-image: url(https://sf-sponsor.b0.upaiyun.com/4ea23eebe5bf3d21b6a8cfe99591a734.gif) ;                                                         }                         p:nth-of-type(3){                                 background-image: url(https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=493936389,3762320949                                                         }                 >         >         >                 >                         ><>                         ><>                         ><>                 >         > >  

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐