使用CSS縮放背景圖像

Question

我從Startbootstrap.com使用以下Modern Business Template，並且主頁上有一個輪播。當我使用CSS屬性設置背景圖像時，background-size: cover;它拉伸圖像但不縮放。如何拉伸圖像以覆蓋整個轉盤面板並適當縮放。

HTML：

<div class="item"> 
    <div class="fill" style="background-image:url('Content/img/myimage.jpg');"></div> 

CSS：

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

Answer 1

在地方上background-fit: cover，我相信你要找的是什麼object-fit: cover。像background-fit: cover,object-fit: cover允許圖像覆蓋父級的全部寬度，但不縮放圖像，使其保持其縱橫比。

header.carousel .fill { 
    width: 100%; 
    height: 100%;     
    background-repeat: no-repeat; 
    background-position: center center; 
    object-fit: cover; 
} 

希望這有助於！ :)