最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 16:00:59
文档

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

图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose:代码如下: #tt { background-color:#FF0000; margin: auto; width: 100%; height:400px; } #tt .img { width:1920px; } --> 需求如题 解释如下 如下图1 是没有加图片的效果,图2是加了图片的效果,图3是图片原图
推荐度:
导读图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose:代码如下: #tt { background-color:#FF0000; margin: auto; width: 100%; height:400px; } #tt .img { width:1920px; } --> 需求如题 解释如下 如下图1 是没有加图片的效果,图2是加了图片的效果,图3是图片原图
代码如下:



需求如题
解释如下
如下图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;只为分数而来

楼上大神有代码没。

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

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

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

文档

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

图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose:代码如下: #tt { background-color:#FF0000; margin: auto; width: 100%; height:400px; } #tt .img { width:1920px; } --> 需求如题 解释如下 如下图1 是没有加图片的效果,图2是加了图片的效果,图3是图片原图
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top