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

图片宽度超出div，css控制图片不改变原大小情况居中显示，图片超出div部分隐藏
代码如下：
<style type="text/css">
<!--
#tt {
background-color:#FF0000;
margin: auto;
width: 100%;
height:400px;
}
#tt .img {
width:1920px;
}
-->
</style>

<div id="tt"><img src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/></div>
需求如题
解释如下
如下图1 是没有加图片的效果，图2是加了图片的效果，图3是图片原图  图4是想要的效果，请大神出手相助，谢谢



图1


图2


图3



图4




------解决思路----------------------
你的需求好奇怪，如果是要图四的效果（即图片的高度显示不全），以下代码可以满足。

#tt {

background-color:#FF0000;

margin: auto;

width: 100%;

height:400px;

overflow: hidden;   /* 添加的 */

}

正常情况下是这样的需求，在宽度上适应屏幕，不出现水平方向上的滚动条，高度随着宽度等比例变化，即图片宽高成比例变化，可以这么做：

#tt .img {

width: 100%;

}

------解决思路----------------------
我这正好有代码，找我下，私聊我信箱，给你发去
------解决思路----------------------

<style>

#tt {

  background-color:#FF0000;

  width: 100%;

  height:500px;

  overflow: hidden;

}

#tt .img

{

  width:1920px;

  margin:0 calc(50% - 960px);

}

</style>


<div id="tt"><img src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/></div>