Question

众所周知，我们可以根据以下代码的比例创建一个100％父级宽度和高度的响应式图像。但是，我希望通过使用background-image CSS将其视为背景图像来实现相同的效果。

似乎我无法找到任何解决方案。

<div style="margin: 0 20px;">
	<div style="width: 100%">
	    <img style="width: 100%" src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg">
	</div>
</div>

似乎有很多人回答了关于background: contain和background: cover的问题，但这并不起作用。我提供了一个代码片段，以便更好地说明。

规则：
1）不应指定div的高度。
2）background应使用CSS（这就是我将其称为背景图像的原因） 3）背景图像高度应根据宽度自动缩放。

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg') no-repeat;
}

<div style="margin: 0 20px;">
    	<div class="bg-image">
 
    	</div>
    </div>

Answer 1

我找到了另一个解决方案，在here中提到了。您可以使用以下代码执行此操作。

HTML

<div id="wrapper">
    <img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>

CSS

#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}

通过这样做，您不需要指定任何固定高度。 div的高度将等于实际图像的高度。

以下是您的代码的更新版本：

＆＃13;

#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}

＆＃13;

<div id="wrapper">
	<img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>

＆＃13;

Answer 2

你需要让内部div填充父div - 因此宽度和高度为100％。然后将每个背景大小设置为100％。

<div style="height:300px; width:300px;">
    <div id="bg">
    </div>
</div>

<style>
    #bg { 
        width: 100%;
        height:100%;
        background-size:100% 100%;
        background-image:url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
    }
</style>

Example jsfiddle here

Answer 3

将图像或div的填充设置为100％，如下所示：

.bg-image{
    background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg')  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:100%;

 }

Answer 4

这很简单，你只需要为css类添加somme属性;）我希望这就是你要找的东西

Set ws = ActiveWorkbook.Sheets("-")

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
  background-repeat: no-repeat;
  
  background-position: 50% 50%;/*  */
  background-size: cover; 
  height: 43.5625rem;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;  
}

100％宽度的背景图像

4 个答案: