图片宽度超出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%;
}

[jquery起步之路忘各位大大不吝赐教]

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

[乱世骄子]

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

[乱世骄子]

楼上大神有代码没。

[tinywang5575]

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

[slwsss]

<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>

[mickey302]

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

[言言言小鱼]

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

[a753255157]

7楼正解！

[qq_33595171]

如果是3张连续的滚动图片（幻灯），怎样办？

[lixh_0142]

那就给每个容器设置不同的背景图

[lixh_0142]

例如，注释掉的是常规写法，下面的就是背景图方式，给每个a设置不同背景图，背景定位设置为 center，这样就能让大图居中显示，两端隐藏

[weixin_43156989]

做法： 当图片尺寸大于父级容器时，想让图片居中可以给父容器设置text-align: center; 然后给子元素设置margin: 0 -100%; 原理： 让父容器的内容居中时由于图片过大，左边又抵着边界，无法居中，这时给予负值外边距可以允许内容超出外边界。理论上负值的大小只要足够让图片居中就行，但是为了省脑筋，会直接给予最大的负值-100%。 注：图片居中了还没完，经常会搭配overflow:hidden;将图片多出父容器的部分隐藏掉。 --------------------- 例如：

[weixin_43156989]

.div{ width: 100%; display: block; overflow: hidden; text-align: center; } .img{ width: 170%; height:auto; margin: 0 -100%; }

[monkey8027]

6楼才是正解 CSS3大法好