我想保持图像的相同比例。问题是当浏览器很宽时它会拉伸。
并在减少时挤压。
我在这里检查了所有问题,但大多数问题都没有帮助我。
这里是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">
这是CSS
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
我试图制作一个 jsfiddle 但我做不到这是该页面的链接http://maanastore.com/home.php http://maanastore.com/home.php
从相应文件中删除以下 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;
to .carousel
carousel.css 文件中的类并删除height:500px
来自同一类,因为你已经修复了导航栏。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)