背景图像被剪切而不是缩小答案

【问题标题】：Background image is cut instead of zooming out背景图像被剪切而不是缩小
【发布时间】：2021-11-26 04:52:40
【问题描述】：

我的网站背景图像响应能力在 md 大小期间有效 -> 当它变成 sm 和 xs 时它被剪切 - 这意味着当我想在 xs 期间看到猫时，我只能看到一只猫。如何修复它以在较小尺寸时查看我的所有背景照片？

HTML：

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?familyans+SC:wght@300&display=swap" rel="stylesheet">

    <div th:replace="fragments/front_head"></div>

</head>

<body>

    <div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
    </div>

<nav th:replace="${@service.getLoggedCustomer()} ? 'fragments/cattery_logged_in_navbar' : 'fragments/cattery_navbar'"></nav>

<footer th:replace="fragments/cattery_footer"></footer>

</body>

</html>

CSS：

body {
padding-top: 120px;}

【问题讨论】：

标签： html css responsive-design background-image bootstrap-5

【解决方案1】：

首先，从 .bg-image 元素的 style 属性中删除 background-size 和 background-position css。然后试试这个 CSS。

.bg-image{
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 450px) {
  .bg-image{
    background-size: cover;
  }
}

裁剪的原因是“封面”背景大小显示整个图像居中。当然，这会导致裁剪，因为较小的尺寸太小而无法以原始尺寸显示整个图像。包含确保您可以看到所有图像。

【讨论】：

这是一个很好的答案。您也可以尝试background-size: initial; 让 img 恢复其默认大小。