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

happyxp

  今天做一个网站的banner轮播，程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%，图片大小不变，div宽度改变的情况下，图片始终居中显示，然后隐藏掉两边的图片。
' g$ E: h; f% d2 X7 g- @9 A( a
  实现原理：
  固定div的高度为500px，宽度是100%，超出部分隐藏，以达到自适用浏览器宽度的要求。图片控制宽1920px，适用目前大部分电脑屏幕分辨率，然后就是设置margin了，想要他始终居中，就是中心的位置始终不变。在1920px的情况下，图片的中心x轴就是960px。那么在1800px就是900px，相比与标准的1920px宽度，向左移动了60px，只需要margin左边移动-60px即可。
, I; B# E" q9 g! N  同理在100%的x轴坐标下，margin-left的值就是50%-960px，代码如下：
& T$ H% s  p6 W5 F+ u& c: d

1. <style>
   
2. #bn {
   2 {) X5 o. a1 l; @* G4 m1 c; S
3.   background-color:#FF0000;
   # Y5 Q! K' ?  `; u' a/ Z
4.   width: 100%;
   
5.   height:500px;
   3 s7 o) A& `9 i, L7 X7 s5 {5 F5 {
6.   overflow: hidden;
   . y/ O% p; Z/ b- r) P  s5 o
7. }
   5 l: a7 G/ }3 ~
8. #bn .img
   
9. {
   
10.   width:1920px;
    , M9 {# Y& ]' P# z  E7 s
11.   margin:0 calc(50% - 960px);
    * w- g; G0 p, n
12. }
      y* `8 y$ V) m7 ?9 i$ F4 v* `
13. </style>
    8 n* f. t6 Z( |5 O2 B) }7 X% f
14. 
    
15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>

复制代码

: P0 g  G$ f. A3 Z  ^& \, \& O
9 G  z% n3 z& q6 R, S3 c