Heim > Artikel > Web-Frontend > 图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose
代码如下:
你的需求好奇怪,如果是要图四的效果(即图片的高度显示不全),以下代码可以满足。
#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 src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/ alt="图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose" ></div>
你可以换个思路,不要把图片放在div中,作为div的背景图片,利用background-size:cover,就可以实现绝对居中,这样还可以摆脱div宽高度变动需要重新调整的限制
你的图片大小到底变不变?如果img设置成100%,那么永远都是随外边的div宽度变化,也就是居中的效果。如果你的图片宽度就是1920px不变的话,楼上的方法可行,就是做成背景图片。