twitter-bootstrap Bootstrap 轮播：滑动时图像超出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13395028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel: images out of div when sliding
提问by Gerard Clos
I have a problem I can't figure out. I'm using bootstrap's carousel and everything works fine except for transitions: next items appear out of myCarousel div when the sliding transition starts and previous active items slide out of myCarousel div as they are being replaced by my next item.
我有个问题想不通。我正在使用引导程序的轮播，除了过渡之外，一切正常：当滑动过渡开始时，下一个项目出现在 myCarousel div 之外，而先前的活动项目从 myCarousel div 中滑出，因为它们正在被我的下一个项目替换。
Here's my html code:
这是我的 html 代码：
<div id="myCarousel" class="carousel slide span6">
<div id="carousel-inner">
<div class="active item">
<img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
</div>
<div class="item">
<img src="img/charnwood_forest_landscape.jpg" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
I'm only using the carousel script:
我只使用轮播脚本：
$(document).ready(function() {
$(".carousel").carousel({
interval: 5000,
pause: "hover",
});
});
Here's a link to an example of my problem so you can check my entire code: http://todoapp.nfshost.com/slide
这是我的问题示例的链接，因此您可以检查我的整个代码：http: //todoapp.nfshost.com/slide
Anyone who can see what's the problem ?
任何人都可以看到什么问题？
Thank you!
谢谢！
回答by Kader-timon
<div id="myCarousel" class="carousel slide span6" style="overflow:hidden">
<div id="carousel-inner">
<div class="active item">
<img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
</div>
<div class="item">
<img src="img/charnwood_forest_landscape.jpg" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
Hey Friend add overflow hidden in the myCarousel id.
嘿朋友添加隐藏在 myCarousel id 中的溢出。
回答by fxbt
You can add this in your css :
你可以在你的 css 中添加这个：
.carousel { overflow: hidden; }
and
和
.item { overflow: hidden: }
回答by Oscprofessionals
just add width:100%;to the images
只需添加width:100%;到图像
img {
width: 100%;
}
回答by Chris Troutner
I tried Kader's solution to set 'overflow: hidden', but for some reason that only worked on large screens. The overflow outside the div still appeared on smaller screens.
我尝试了 Kader 的解决方案来设置“溢出：隐藏”，但由于某种原因，这只适用于大屏幕。div 外的溢出仍然出现在较小的屏幕上。
Ultimately, here is the styling I added to the top of the page to fix this issue:
最终，这是我添加到页面顶部以解决此问题的样式：
.carousel-inner > .next {
display: none;
}
.carousel-inner > .prev {
display: none;
}
The incoming image has the .next or .prev class added to it during the transition. By hiding this element it prevent the overflow issue.
传入图像在转换期间添加了 .next 或 .prev 类。通过隐藏这个元素，它可以防止溢出问题。
There is probably a more elegant solution, but this was quick, easy, and effective.
可能有一个更优雅的解决方案，但这是快速、简单和有效的。
回答by Neeraj Sewani
If overflow:hiddenthen try fixing the height of carousel-item
如果overflow:hidden然后尝试固定高度carousel-item
#carousel-item {
height: 40rem;
}
and,
和，
img {
width: 100%;
height: 100%;
display: block;
background-size: cover;
}
