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

希望这有助于！ :)