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

希望这有帮助！：）

使用CSS

1 个答案: