css修复手机上的封面背景太放大答案

【问题标题】：Css fixed cover background on mobile phone is too zoomedcss修复手机上的封面背景太放大
【发布时间】：2017-03-24 11:56:02
【问题描述】：

我一直在寻找这个问题一段时间，但由于我找不到任何可行的解决方案，所以我决定询问。我正在尝试对我的网站实施一些响应性。当我使用谷歌浏览器的检查元素工具时，背景显示正确，如果我在手机上继续，背景实际上太放大了。我试过放滚动附件，但它不起作用。

这是关于背景的文章。

.background2p{
	background: url('background2.jpg') fixed no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="Risorse/css.css" rel="stylesheet" type="text/css">
	</head>
	
	<body class="background2p">
	</body>
</html>

【问题讨论】：

这是因为您尝试使用的图像已针对桌面比例 (16:9/ 16:10) 和在移动设备上时 (纵向) 进行了优化（阅读此内容以了解移动设备上的比例 @987654321 @)。获取另一张图片作为移动设备的背景，将其裁剪为 9:16 左右的比例。媒体查询在移动设备大小之前不会加载图像，因此不必担心文件优化。

标签： html css

【解决方案1】：

这是因为 背景尺寸：封面； 背景图片的宽高比不适合元素尺寸

您可以根据手机屏幕使用另一个仅具有适当尺寸的手机背景图片（请参阅桌面浏览器中的响应式视图以查找尺寸），或者您可以使用 background-size: contains;。在第二种情况下，您可能会在背景中看到一些空白区域，但您会看到完整的图像

【讨论】：