|
今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。 目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
3 c0 ^- F' _6 A% M: ^, O% A) e' k# G, T: y7 j
实现原理:
6 M6 z. ?: T+ k, o 固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。$ l/ b% C! \3 t1 j2 m# z6 r
同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:0 z( P: r/ d6 j b
- <style>5 C$ H3 t2 i9 e- l. b N
- #bn {
- v( p7 ~- V4 m# C5 a! D" d - background-color:#FF0000;& J/ z& s1 z# M4 ]+ Q
- width: 100%;; r0 |- G4 x! @9 Z1 |( `9 X4 \
- height:500px;
+ |2 |" S/ b' D2 `5 v - overflow: hidden;- z6 c$ x& @; G+ C
- }% y$ n- T; S! b- _* L, n D3 Y0 `
- #bn .img
, w$ ~+ ]' A# }+ J v2 K! G6 O - {
% L. m# w# o% O4 x% m - width:1920px;
3 g! R! R! F; Y& X+ g/ V, c - margin:0 calc(50% - 960px);
" D8 p4 [2 P' i+ `; h# `6 x' w7 [ - }
3 r0 T6 |. A+ S6 d" k5 F/ p U7 N - </style>* i5 Z, @0 [. }1 b3 o- X- g
3 T' J/ A! o3 H7 Q+ s; m- <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
6 K" ]: d& h, q+ {- z* @
' u2 V4 ?- Y3 D+ E! }7 a$ {/ o |
|