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

happyxp

  今天做一个网站的banner轮播，程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%，图片大小不变，div宽度改变的情况下，图片始终居中显示，然后隐藏掉两边的图片。
9 U. V4 A, c8 i3 h8 L8 n
5 m& Q$ X* U1 `4 K" j  实现原理：
  固定div的高度为500px，宽度是100%，超出部分隐藏，以达到自适用浏览器宽度的要求。图片控制宽1920px，适用目前大部分电脑屏幕分辨率，然后就是设置margin了，想要他始终居中，就是中心的位置始终不变。在1920px的情况下，图片的中心x轴就是960px。那么在1800px就是900px，相比与标准的1920px宽度，向左移动了60px，只需要margin左边移动-60px即可。
  同理在100%的x轴坐标下，margin-left的值就是50%-960px，代码如下：

1. <style>
   
2. #bn {
   ) _0 z  v' R! d0 H5 @  e! `4 Z9 ~; c
3.   background-color:#FF0000;
   1 B9 ]$ s7 ~8 q* z: f
4.   width: 100%;
   , ?) g/ J0 V/ @  V" \4 C- m
5.   height:500px;
   
6.   overflow: hidden;
   # V( ]/ G. |9 y0 S
7. }
   ; H% ?+ R+ L  ^: |7 o: U  P
8. #bn .img
   
9. {
   7 P& o" P9 R2 ~# n
10.   width:1920px;
    1 o( I5 N; e/ S$ H, _0 z
11.   margin:0 calc(50% - 960px);
    
12. }
    : G# s/ r) m- {3 V8 G; \* @
13. </style>
    
14. 
    / l' Z1 O$ C: H- U% W/ l
15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>

复制代码

# z: p# x4 m+ C; s: q1 C, X
% C* x: `# D! }( u* T7 \! j2 I$ k