css - 背景图片在我的移动浏览器中显示不正确

Question

我的网站上的图片有问题它在浏览器中显示不正确图片在移动浏览器中剪切了某些区域

这是图片 desktop pc screen image image on a mobile browser

这是图片的代码

section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;

background-position: center;
background-attachment: scroll;

@media only screen and (max-device-width: 320px) {

Answer 1

第 1 步:查找 code you are using看看它应该做什么:

cover A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

好吧，它正在裁剪图像，而你不希望它裁剪图像，所以显然 cover 是错误的。

第 2 步:查看其他选项:

contain A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.

这可能会完成这项工作。

<percentage> A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.

... 或者那个(100% 100%)，取决于你真正想要什么: