背景尺寸：封面；放大/缩小效果答案

【问题标题】：background-size:cover; zoom in/out effect背景尺寸：封面；放大/缩小效果
【发布时间】：2015-11-28 02:14:16
【问题描述】：

我在尝试使用 background-size:cover; 时遇到问题在 CSS 中。

解释一下：

当我有一个宽度为 100% 且高度固定的 div 时，当我在浏览器中 control+ 和 control- 时，该 div 的背景图像不适合 div 内部，它会改变（如果我可以放大/缩小效果像这样说）。

如果我有一个 100% 宽度的 div 和另一个具有固定宽度和高度的 div（第一个的子级），并且我将背景图像设置为 background-size:cover，则放大/缩小效果不起作用。

我希望我解释得很好，但让我在代码中显示问题。

<html>
<head>
<title>Test</title>
<style>
body
{
	background:red;
}


.test
{
	width: 100%;
	height: 300px;
	background-image: url( 'http://bhodbuzz.com/wp-content/uploads/2015/06/6924750-mountain-wallpaper.jpg' );
	background-size: cover;
}

.test2
{
	width: 100%;
	margin: 0px auto;
}

.inner
{
	margin: 0px auto;
	width: 900px;
	height: 300px;
	background-image: url( 'http://bhodbuzz.com/wp-content/uploads/2015/06/6924750-mountain-wallpaper.jpg' );
	background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>

如何解决问题？

【问题讨论】：

在 Firefox 上缩放对我有用。您正在检查什么浏览器，或者您所说的“不工作”到底是什么意思。
阅读我帖子下方的答案。
您仍然应该澄清您在问题中的意思。
我在我的例子中澄清了，亚当明白了。我不知道更好的解释。
更好的解释是解释“不起作用”的含义。究竟发生了什么让你得出“这行不通”的结论？缩放功能是否损坏？图像会消失吗？它会变成独角兽吗？等等。

标签： css background size cover

【解决方案1】：

问题是您的第一个 div 会根据窗口大小更改其宽度，因此它会放大/缩小背景图像以填充 div。您的 div test2 具有固定宽度，因此除非背景图像小于 div，否则背景不会“放大”。我看到您使用的图像是全高清尺寸，而您的 div 只有 900 像素宽。看看下面的sn-p，用的小图

<html>
<head>
<title>Test</title>
<style>
body
{
	background:red;
}


.test
{
	width: 100%;
	height: 300px;
	background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
	background-size: cover;
}

.test2
{
	width: 100%;
	margin: 0px auto;
}

.inner
{
	margin: 0px auto;
	width: 900px;
	height: 300px;
	background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
	background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>

【讨论】：

第2格还是没有出现效果。我明白这个问题。该怎么办？我需要固定尺寸。

【解决方案2】：

不需要在你的类中使用宽度。

<html>
<head>
<title>Test</title>
<style>
body
{
	background:red;
}


.test
{
	
	height: 300px;
	background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
	background-size: cover;
}

.test2
{
	
	margin: 0px auto;
}

.inner
{
	margin: 0px auto;
	width: 72.2%;
	height: 300px;
	background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
	background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>

【讨论】：

我知道。但是我需要固定大小，否则，为什么我问这个问题？
然后使用父母的宽度。宽度：80%
它有效，但我只需要 962。是否有可能在 css 中确定 962 与窗口宽度的百分比是多少？或者我需要使用js
宽度：72.2%；你可以使用。
对于所有分辨率，它将根据窗口大小最小化。如果你希望它像 962px 这样的固定宽度，那么它不会响应。