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屏幕和（max-device-width：320px）{

}

Answer 1

第1步：查找code you are using以查看它应该执行的操作：

<强>盖与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比（图像不会被压扁）。图像＆＃34;覆盖＆＃34;容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像将被左/右或上/下剪裁。

嗯，它剪裁图像，你不希望它剪辑图像，所以cover显然是错误的。

第2步：查看其他选项：

<强>包含一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被挤压）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（如background-position）覆盖，否则图像会自动居中。

这可能会起到作用。

<强>＆LT;百分比＆GT; 将相应维度中的背景图像缩放到背景定位区域的指定百分比的值，该值由background-origin的值确定。默认情况下，背景定位区域是包含框内容及其填充的区域;该区域也可以仅更改为内容或包含边框，填充和内容的区域。如果背景的附件是固定的，则背景定位区域是浏览器窗口的整个区域，不包括滚动条所覆盖的区域（如果它们存在）。不允许负百分比。

...或那个（100% 100%），具体取决于您的实际需求：

Answer 2

点击此处 jsfiddle

不要使用cover因为这会使图像被裁剪相反，使用contain也添加background-position:top center，因为contain img调整大小，空格（顶部和底部）填充background-color，在您的情况下为{{1} }。所以最好将bck img对齐到顶部并用你想要的任何东西填充底部区域

您可以使用媒体查询设置pc上的transparent和移动设备上的background-size:cover

代码：

contain

背景图片无法在我的移动浏览器中正常显示

2 个答案: