HTML-背景图像被剪切而不是缩放堆栈溢出

顺晟科技

2022-10-19 14:15:26

185

我的网站背景图像响应在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:

    <!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>

顺晟科技：

首先，从。bg-image元素的style属性中删除and css。然后尝试这个CSS。

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

上一篇：html-javascript-滚动下一篇：JavaScript-“在新选项卡中

网站建设

Html

HTML-背景图像被剪切而不是缩放堆栈溢出