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

我有一个响应图像滑块，我目前有一个宽度占整个屏幕（100%），高度为600px，因为图像大小不同

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

如果我在css页面中删除高度并注释掉高度，我在移动设备上就不再有这个问题，图像也会相应地调整大小。然而，在桌面浏览器中，我面临着这样一个问题：我有不同高度的图像，并且不能通过简单地应用一个带有css属性的类，或者在我的img标记中应用一个样式元素来克服这一问题，因为这不起作用。请参阅下面的示例代码

HTML:

---

最简单的方法是使用引导媒体查询为不同的屏幕分辨率设置不同的高度

---

但是我最好在这里使用一些纵横比调整

最简单的方法是使用引导媒体查询为不同的屏幕分辨率设置不同的高度 但是我最好在这里使用一些纵横比调整

试试这个

<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>

@仅媒体屏幕
和（最小宽度：1224px）{
#img1{
高度：600px！重要；
}
#img2{
高度：600px！重要；
}

试试这个

<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>

@仅媒体屏幕
和（最小宽度：1224px）{
#img1{
高度：600px！重要；
}
#img2{
高度：600px！重要；
}

以下解决了我的问题：

我创建了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类test包装了我的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>

---

我认为这是由于boostrap.css和/或bootstrap.min.css预定义属性优先使用。

以下解决了我的问题：

我创建了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类test包装了我的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>

---

我想这是由于boostrap.css和/或bootstrap.min.css预定义属性占了优先权。

Hi@godbless草莓你的回答给了我一个指示并为我指明了正确的方向，谢谢你的及时回复。Hi@godbless草莓你的回答给了我一个指示并为我指明了正确的方向，谢谢谢谢你的及时回复。嗨@Anto Sujesh谢谢你的回复，你的回答帮助了我的回答。嗨@Anto Sujesh谢谢你的回复，你的回答帮助了我的回答。