html - 背景尺寸 : cover not setting height of background image

Question

我正在尝试获取背景图像以完全填充 div。使用

.class{
   background-image: url('img.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }

和(.row 来自 Foundation 6)

<div class="row columns">
  <div class="class">&nbsp;</div>
</div>

图像横跨容器的宽度，但高度只有 23px 左右，大概是   的行高。我怎样才能让他的图像的高度成为图像的完整高度，宽度由 cover 设置？

Answer 1

我是 Foundation 6 的新手，但是如果你想填充所有的 div 并调整宽度和高度:我将这段代码用于背景，也直接在 div 中工作:(来自:https://css-tricks.com/perfect-full-page-background-image/)

.class {

background: url(demo.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

另外，如果你想指定背景尺寸，使用:

background-size: 80px 60px;

您可以使用:

@media screen {}

如果要根据屏幕大小调整背景或css类的任何部分

重要，检查:margin:0px;或 padding:0px;

让我知道这是否对您有帮助，或者您是否需要更具体的信息。