Question

我有一个响应式图像滑块，我目前的宽度占整个屏幕（100％），高度为600px，因为图像尺寸各异。

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

如果我删除了我的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

Answer 2

试试这个

<style>
@media only screen 
and (min-width : 1224px) {
  #img1{
          height:600px !important;
       }
         #img2{
          height:600px !important;
       }
       </style>

       <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' id= "img1" src="img/example.jpg" >
    </div>
    <div class="item">
            <img class='img-responsive fill' id= "img2" 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>

Answer 3

以下解决了我的问题：

我创建了css @media元素：

@media (min-width: 200px) {
  div.test > img{ height: 300px !important ;}
}

@media (min-width: 300px) {
  div.test > img{ height: 300px !important; }
}

@media (min-width: 400px) {
  div.test > img{ height: 300px !important; }
}
@media (min-width: 600px) {
  div.test > img{ height: 400px !important ;}
}
@media, (min-width: 800px) {
  div.test > img{ height: 600px !important ; }
}

然后我用一个div类测试包装了我的html img标签，并使用css属性相应调整了我的图像：

<!-- 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">
            <div class="test"><img class='img-responsive fill' src="img/example.jpg" ></div>
    </div>
    <div class="item">
            <div class="test"<img class='img-responsive fill' src="img/example2.jpg"></div>
    </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属性就无法运行

!important

我认为这是由于boostrap.css和/或bootstrap.min.css预定义的属性正在进行中。

Bootstrap响应式Carousel，自定义高度不会在Mobile，平板电脑上调整大小

3 个答案: