Heim >Web-Frontend >HTML-Tutorial >图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:50:494548Durchsuche

代码如下:


图片宽度超出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  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不变的话,楼上的方法可行,就是做成背景图片。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn