如何解决如何使自举轮播图片具有响应性?
从各个文件中删除以下CSS规则:
在home.php文件中
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
}
在carousel.css中
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
另外,添加margin-top:51px;
到.carousel
carousel.css文件中的类并height:500px
从同一类中删除,因为您已固定了导航栏。
解决方法
我想保持相同的图像比例。问题是浏览器较宽时它会扭伤。并在缩小时挤压。
我在这里检查了所有SO问题,但大多数问题都没有帮助我。
这是 标记:
<!-- 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">
这是 CSS
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}