使用 CSS 缩放背景图像答案

【问题标题】：Scale background images using CSS使用 CSS 缩放背景图像
【发布时间】：2017-06-19 03:44:01
【问题描述】：

我正在使用来自 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;
}

【问题讨论】：

你可以有最小高度和宽度。

标签： css twitter-bootstrap image carousel scaling

【解决方案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;
}

希望这会有所帮助！ :)

【讨论】：