我想保持相同的图像比例。问题是浏览器较宽时它会扭伤。并在缩小时挤压。
我在这里检查了所有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%; }
从各个文件中删除以下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;到.carouselcarousel.css文件中的类并height:500px从同一类中删除,因为您已固定了导航栏。
margin-top:51px;
.carousel
height:500px