|
今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。 目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。- F, p7 y3 c: k1 y5 u8 |9 l) I/ C
; W% I4 c7 @( ~/ Q% N# b
实现原理:5 B- x) \9 d( m
固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
. D% Y3 W) s5 z" `" T4 ^ 同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
6 ^) }/ [: ?1 \5 E1 }- <style>
0 f+ E$ u& L1 R - #bn {
! S. x% f8 c: { R' A, x - background-color:#FF0000;0 D4 G2 U: n3 q) t3 F' f
- width: 100%;( k' \9 c1 H4 R# U, i5 X, K$ _# ?
- height:500px;! Y: I- ]) |7 f9 l( C
- overflow: hidden;; x5 G3 c0 y/ g& z
- }
4 V5 q8 W7 K( V8 a, C - #bn .img
( ?: ~8 ~) `8 Q7 X+ Z7 I+ n3 Y& @ - {/ r/ c D, m5 o- }
- width:1920px;0 f4 P: n W4 p, [7 z* @6 _/ e3 V
- margin:0 calc(50% - 960px);6 D( c% t) @* O) s) \
- }) M0 j' O) r0 U& H; _& E
- </style>
9 l% q2 `, I3 ^4 U
+ z2 R t! z \( H* F: N2 Z: Z- <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码 ! [: r9 }7 n! `
A( i* d( |% h8 ` {9 M# B
|
|