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

2014-12-20 01:26:15 3.6万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

纯css实现banner图轮播且放大缩小100%居中显示纯css实现banner图轮播且放大缩小100%居中显示效果展示：通过对css代码的运行，在浏览器内实现了bannar图的100%居中轮播，由于本人是一个技术小白，在某些方面表达的不是太过清除，欢迎各位批评指正。...... 阅读详情

代码如下：
<style type="text/css">

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

...全文

CSS定位、元素的显示与隐藏、背景线性渐变欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨目录一、CSS定位二、元素的显示与隐藏三、背景线性渐变四、面试题一、CSS定位定位简单来说就是可以自由的把一个盒子放在你想要的位置。浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；定位则是可以让盒子自由的在某个盒子内移动或者固定屏幕中某个位置，并且可以压住其他盒子，将盒子定在某个位置阅读详情

乱世骄子

CSS 61,117 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

monkey8027 2018-12-21

打赏
举报

6楼才是正解 CSS3大法好

weixin_43156989 2018-12-10

打赏
举报

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

weixin_43156989 2018-12-10

打赏
举报

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

lixh_0142 2017-08-29

打赏
举报

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

lixh_0142 2017-08-29

打赏
举报

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

qq_33595171 2016-08-18

打赏
举报

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

a753255157 2016-05-12

打赏
举报

7楼正解！

言言言小鱼 2014-12-26

打赏
举报

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

mickey302 2014-12-25

打赏
举报

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

slwsss 2014-12-24

打赏
举报

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

tinywang5575 2014-12-24

打赏
举报

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

乱世骄子 2014-12-24

打赏
举报

楼上大神有代码没。

乱世骄子 2014-12-22

打赏
举报

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

jquery起步之路忘各位大大不吝赐教 2014-12-22

打赏
举报

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

风动之石 2014-12-20

打赏
举报

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


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

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


#tt .img {
width: 100%;
}

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

相关推荐