我希望保持图片的相同比例,但问题是当浏览器宽度增加时,它会被拉伸,而在缩小时则会被压缩。
我已经查看了这里的所有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%;
}
我尝试制作一个jsfiddle,但是无法制作。这是该页面的链接:http://maanastore.com/home.php
position:relative
添加到父元素。 - Ravimallya