Html 如何使引导轮播图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21178012/
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
How to make bootstrap carousel image responsive?
提问by
I want to keep the same ratio of the images. The problem is it streches when the browser is wide. and squezes when it's reduced.
我想保持相同的图像比例。问题是当浏览器很宽时它会拉伸。并在减少时挤压。
I have checked all SO question here but most of them did not help me.
我已经在这里检查了所有 SO 问题，但其中大多数都没有帮助我。
Here is the markup:
这是标记：
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/female/IMG_5053-2.jpg"
data-src="images/female/IMG_5053-2.jpg" alt="First slide">
and here is the CSS
这是CSS
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
I tried to make a jsfiddle but I couldnt here is the link to the page http://maanastore.com/home.php
我试图制作一个 jsfiddle，但我不能在这里是页面的链接http://maanastore.com/home.php
采纳答案by Ravimallya
Remove the following CSS rules from respective files:
从相应的文件中删除以下 CSS 规则：
In home.php file
在 home.php 文件中
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
}
in carousel.css
在 carousel.css 中
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Also, add margin-top: 51px;to .carouselclass in carousel.css file and remove height:500pxfrom the same class, because you have fixed navbar.
此外，添加margin-top: 51px;到.carouselcarousel.css 文件中的类并height:500px从同一个类中删除，因为您已经修复了导航栏。
回答by Cameron
I found it best to remove the following.
我发现最好删除以下内容。
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
and in .carousel remove:
并在 .carousel 中删除：
height: 500px;
and in .carousel .item remove
并在 .carousel .item 中删除
height: 500px;
for me this made the image work the way I wanted it to but be sure to insert an image in your html first or else I think it will just collapse into nothingness if you are working locally.
对我来说，这使图像按照我想要的方式工作，但一定要先在你的 html 中插入一个图像，否则我认为如果你在本地工作，它就会崩溃。
edit:Another user suggested I add this
Please Note that if the image shows grey bars on either side or even on one side, I'd recommend keeping
编辑：另一位用户建议我添加这个
请注意，如果图像在任一侧甚至一侧显示灰色条，我建议保留
.carousel-inner > .item > img {
min-width: 100%;
}
回答by oldman
what i ended up doing was adding a div inside then have the image background of the div as responsive
我最终做的是在里面添加一个 div 然后让 div 的图像背景作为响应
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="img1">
</div>
<!--<img class=" imgCstm " src="images/home/bng_00.jpg" alt="First slide">-->
</div>
</div>
<style>
.carousel-inner {
height: 100vh;
<! -- custom hight -->
}
.carousel-item {
height: 100%;
}
.img1 {
background-image: url('../images/home/bng_00.jpg');
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
</style>
回答by gvbaker55
I made these adjustment to bootstrap.cssat lines 5835 - 5847:
我对bootstrap.css第 5835 - 5847 行进行了这些调整：
.carousel-inner {
position: relative;
/* Removed height here */
overflow: hidden;
}
.carousel-item {
position: relative;
width: 100vh;
height: 100vh;
display: none;
width: 100%;
}
Worked like a champ!
像冠军一样工作！
回答by MUGOYA DIHFAHSIH
i have been working on a project of such this might help someone in need of a slider which is responsive with the browser.
我一直在研究这样的项目，这可能会帮助需要浏览器响应滑块的人。
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700");
body {
font-family: "Open Sans", sans-serif;
color:black;
}
slider{
display: block;
width: 100%;
height: 80%;
overflow: hidden;
position: absolute;
}
slider > *{
position: absolute;
display: block;
width:100%;
height: 100%;
animation: slide 8s infinite;
}
slide:nth-child(1){
left:0%;
animation-delay: -10s;
background-image: url(../images/slider7.jpeg);
background-size: cover;
background-position: center;
}
slide:nth-child(2){
animation-delay: -12s;
background-image: url(../images/slider2.jpeg);
background-size: cover;
background-position: center;
}
slide:nth-child(3){
animation-delay: -14s;
background-image: url(../images/slider6.jpeg);
background-size: cover;
background-position: center;
}
slide:nth-child(4){
animation-delay: -16s;
background-image: url(../images/slider0.jpeg);
background-size: cover;
background-position: center;
}
slide p{
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin:10%;
color:#fff;
}
slide h1{
font-family: Comfortaa;
font-size: 60px;
text-align: center;
display: inline-block;
color:#fff;
margin-top: 20%;
margin-left: 10%;
}
@keyframes slide {
0% {left:100%; width:100%;}
5% {left:0%;}
25% {left:0%;}
30% {left: -100%; width: 100%;}
30.0001%{left: -100%; width:0%;}
100%{left: 100%; width: 0%}
}<section class="container">
<slider>
<slide></slide>
<slide><h1>Slide Text one</h1></slide>
<slide><h1>Slide Text Two</h1></slide>
<slide><h1>Slide Text Three</h1></slide>
</slider>
</section> This link can also give you more insights Making Images Responsive
此链接还可以为您提供更多见解使图像具有响应性
回答by jantonioavalos
You can do a typical use of margin, to improve your result centering your image.
您可以使用margin的典型用法，以改善将图像居中的结果。
.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.
max-width: 100%; }
