图片宽度超出div，css控制图片不改变原大小情况居中显示，图片超出div部分隐藏

happyxp

  今天做一个网站的banner轮播，程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%，图片大小不变，div宽度改变的情况下，图片始终居中显示，然后隐藏掉两边的图片。
  D/ U+ b( ]5 O( Z. y
  实现原理：
: k. [/ R( {& U0 }( |( A  固定div的高度为500px，宽度是100%，超出部分隐藏，以达到自适用浏览器宽度的要求。图片控制宽1920px，适用目前大部分电脑屏幕分辨率，然后就是设置margin了，想要他始终居中，就是中心的位置始终不变。在1920px的情况下，图片的中心x轴就是960px。那么在1800px就是900px，相比与标准的1920px宽度，向左移动了60px，只需要margin左边移动-60px即可。
) T6 L# ]( J; d  同理在100%的x轴坐标下，margin-left的值就是50%-960px，代码如下：

1. <style>
   
2. #bn {
   
3.   background-color:#FF0000;
   ' Q& z4 {$ f8 `. g0 y
4.   width: 100%;
     I/ j- u/ b8 Q1 {
5.   height:500px;
   
6.   overflow: hidden;
   : Z- ?# h0 V+ D% K4 ~# i
7. }
   . ^; w( T' y/ q7 p' a) i2 x& M2 s( h
8. #bn .img
   8 l) q) W" j$ |1 E9 d4 F1 u' C
9. {
   7 l- o" o! n) J) h# n* D+ ?
10.   width:1920px;
    + p- V- Z+ f/ L  }( _* Z
11.   margin:0 calc(50% - 960px);
    
12. }
    9 X( A0 E8 v) b$ A" d+ F+ d" u
13. </style>
    ; t7 i8 X' A2 Y$ P( O
14. 
    . {3 T3 `/ d/ a8 T
15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>

复制代码

0 ~1 ~+ _7 E; K( W7 H( ]5 L7 \
1 Z. K. h0 v) ?! A- ?