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

代码如下：

需求如题
解释如下
如下图1 是没有加图片的效果，图2是加了图片的效果，图3是图片原图  图4是想要的效果，请大神出手相助，谢谢



图1


图2


图3



图4

回复讨论(解决方案)

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

#tt {background-color:#FF0000;margin: auto;width: 100%;height:400px;overflow: hidden;   /* 添加的 */}

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

#tt .img {width: 100%;}

我的这个帖子可能没表达清楚我的需求，比如一个活动页中div里面的一个img宽度1920， 需求是我浏览器分辨率是1024  那么img就显示1024宽度居中，超出范围隐藏，如果浏览器分辨率是1400，那么img就居中显示1400宽度，两边超出部分隐藏。

这个得写jquery，获取那个div的宽度，将这个宽度值赋给img，css中img加个overflow：hidden；只为分数而来

楼上大神有代码没。

我这正好有代码，找我下，私聊我信箱，给你发去

<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  class="img lazy"  src="/static/imghwm/default1.png"  data-src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg"   / alt="图片宽度超出div，css控制图片不改变原大小情况居中显示，图片超出div部分隐藏_html/css_WEB-ITnose" ></div>

你可以换个思路，不要把图片放在div中，作为div的背景图片，利用background-size:cover，就可以实现绝对居中，这样还可以摆脱div宽高度变动需要重新调整的限制

你的图片大小到底变不变？如果img设置成100%，那么永远都是随外边的div宽度变化，也就是居中的效果。如果你的图片宽度就是1920px不变的话，楼上的方法可行，就是做成背景图片。