i have an bootstrap carousel on my page. The images I use have all different heights. I want that all images have the same height. For that I used
我的页面上有一个bootstrap轮播。我使用的图像具有不同的高度。我希望所有图像都具有相同的高度。为此我用过
.carousel{ max-height: 1000px; overflow: hidden; }
I know it's not perfect but it works on desktop view. But in mobile view it didn't work and the pictures have not the same height. So how can I make it that the images have all the same height in mobile view? I hope someone can help me :) Thanks.
我知道它并不完美，但它适用于桌面视图。但在移动视图中它不起作用，图片的高度不同。那么我怎样才能使图像在移动视图中具有相同的高度？我希望有人可以帮助我:)谢谢。
That's my carousel-code:
那是我的旋转木马代码：
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/security.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/sport.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/service.png" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
1 个解决方案
#1
0
I would suggest you to use height not max-height Owl carousel is responsive so it adds width:100% to each image whatever the screen-width is. and probably your images won't get the 1000px height. so it would be better if you add this code.
我建议你使用高度不是最大高度猫头鹰旋转木马是响应所以它增加宽度：每个图像100％，无论屏幕宽度是多少。可能你的图像不会达到1000px的高度。所以如果你添加这个代码会更好。
@media only screen and (max-width: 576px) {
.carousel .carousel-inner .item{
height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image
}
}
If images are not the same height I prefer if you add them to the div of class item as a background-image css property
如果你将它们作为background-image css属性添加到类项目的div中，我喜欢的图像高度不同
#1
0
I would suggest you to use height not max-height Owl carousel is responsive so it adds width:100% to each image whatever the screen-width is. and probably your images won't get the 1000px height. so it would be better if you add this code.
我建议你使用高度不是最大高度猫头鹰旋转木马是响应所以它增加宽度：每个图像100％，无论屏幕宽度是多少。可能你的图像不会达到1000px的高度。所以如果你添加这个代码会更好。
@media only screen and (max-width: 576px) {
.carousel .carousel-inner .item{
height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image
}
}
If images are not the same height I prefer if you add them to the div of class item as a background-image css property
如果你将它们作为background-image css属性添加到类项目的div中，我喜欢的图像高度不同