Bootstrap響應傳送帶圖像

Question

我正在嘗試使img在我的引導程序傳送帶響應中。我試圖改變CSS中的高度和寬度，但它似乎不工作。 我想要的高度是100vh，寬度是任何img的寬度。溢出部分可以隱藏，但img必須按比例縮放。現在，當屏幕變小時，它看起來像這樣。

這是代碼。

@media only screen and (max-width : 768px) { 
 
     .carousel-inner > .item > img { 
 
       height: 100vh; 
 
       width: auto; 
 
       overflow: hidden; 
 
     } 
 
}

<div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
    </div> 
 
</div> 
 
              

Answer 1

如果你只關心，高度爲適合視口，然後只需設置高度而不是寬度和它工作正常。

請記住，您已將此代碼包裝在@media查詢中，這意味着這些樣式僅在符合查詢條件時才適用。

.carousel-inner > .item > img { 
 
       height: 100vh; 
 
       //width: auto; 
 
       overflow: hidden; 
 
     }

<div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="https://images.unsplash.com/photo-1487772841463-eb1f383a9e67?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="xmas_orchestra"> 
 
    </div> 
 
</div>