html - Bootstrap 响应式旋转木马，具有自定义高度，不会在移动设备、平板电脑上调整大小

Question

我有一个响应式图像 slider ，由于图像大小不一，我目前的宽度占据整个屏幕 (100%)，高度为 600 像素。

当我在移动设备上调整浏览器大小和/或导航到相关网站时，由于应用了自定义的 600 像素高度大小，图像无法正确调整大小以适合屏幕。

如果我删除高度和/或在我的 css 页面中注释掉高度，我在移动设备上不再有问题并且图像会相应地调整大小。但是，在桌面浏览器中，我会遇到这样的问题，即我的图像具有不同的高度，并且无法通过简单地应用具有 css 属性的类和/或我的 img 标签中的样式元素来解决这个问题，因为这不起作用。请在下面查看我的示例代码。

HTML:

<!-- 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>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
            <img class='img-responsive fill' src="img/example.jpg" >
    </div>
    <div class="item">
            <img class='img-responsive fill' src="img/example2.jpg">
    </div>           
</div>

<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
</a>

CSS:

header.carousel .fill {
    width: 100%;
    height: 600px;
    background-position: center;
    background-size: cover;
}

Answer 1

最简单的方法是使用引导媒体查询为不同的屏幕分辨率设置不同的高度 http://getbootstrap.com/css/#grid-media-queries 但我最好在这里使用一些纵横比调整 http://www.mademyday.de/css-height-equals-width-with-pure-css.html