图片宽度超出div，css控制图片不改变原大小情况居中显示，图片超出div部分隐藏
今天做一个网站的banner轮播，程序里面自带的是自动改变图片的高宽比例达到自适用的目的。目标想法是控制div宽度100%，图片大小不变，div宽度改变的情况下，图片始终居中显示，然后隐藏掉两边的图片。实现原理：
固定div的高度为500px，宽度是100%，超出部分隐藏，以达到自适用浏览器宽度的要求。图片控制宽1920px，适用目前大部分电脑屏幕分辨率，然后就是设置margin了，想要他始终居中，就是中心的位置始终不变。在1920px的情况下，图片的中心x轴就是960px。那么在1800px就是900px，相比与标准的1920px宽度，向左移动了60px，只需要margin左边移动-60px即可。
同理在100%的x轴坐标下，margin-left的值就是50%-960px，代码如下：
<style>
#bn {
background-color:#FF0000;
width: 100%;
height:500px;
overflow: hidden;
}
#bn .img
{
width:1920px;
margin:0 calc(50% - 960px);
}
</style>
<div id="bn"><img src="/image/1.jpg" class="img"/></div>
页:
[1]