自舉響應傳送帶，自定義高度不調整移動，平板電腦

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

我再包我的HTML img標籤有一個div類測試的這調整我的形象因此與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預先定義的屬性，這些屬性是優先考慮的。