|
今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。 目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。2 q7 M, I {9 e) f% A
+ ?5 s% g" }! \/ @ 实现原理:# |" w7 m' i$ }& l
固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。- P3 C9 p8 m, ^& f* i' L7 z
同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
7 p; ?! T, F1 o& @" N. Y- h- <style>: P9 y1 G( m, u; O
- #bn {8 `3 r* G, h6 K0 s9 n6 m6 H
- background-color:#FF0000;8 f) W# ]5 h" o" |
- width: 100%;+ M1 o7 G* Q) E- {! u
- height:500px;$ I/ r s8 c6 |, t1 U6 b
- overflow: hidden;: F% @4 J( s" o9 N
- }5 {3 m3 N2 ]9 ~8 [+ b
- #bn .img
6 D, w: N; |% }) G - {0 {1 B' O3 ?6 B
- width:1920px;* H1 Y% `* E! e& _: `) |4 Y" r
- margin:0 calc(50% - 960px);
/ f6 `3 U3 [5 p8 O - }
; i2 u. f* ~ b) A - </style>
' \3 ]) C, O5 x& A - {9 m8 N: {0 d
- <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码 1 r+ T1 M* e* T. ~1 @
1 A; N/ O- ]% X
|
|