我的网站背景图像响应工作在md size ->当它在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;}
首先，从.bg-image元素的style属性中删除background-size和background-positioncss。那就试试这个CSS。
.bg-image{
background-size: contain;
background-position: center;
}
@media screen and (min-width: 450px) {
.bg-image{
background-size: cover;
}
}是裁剪的原因是"cover"背景大小显示整个图像居中。当然导致种植以来,小尺寸太小显示整个图像的原始大小。包含确保你可以看到所有的图像。