背景大小：覆盖不设置背景图像的高度答案

【问题标题】：Background-size: cover not setting height of background image背景大小：覆盖不设置背景图像的高度
【发布时间】：2016-07-15 01:21:06
【问题描述】：

我正在尝试获取背景图像以完全填充 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左右，大概是&nbsp;的行高。我怎样才能让他的图像高度成为图像的全高，宽度由cover 设置？

【问题讨论】：

背景色作品？
@MohitBhardwaj 如果我用背景颜色替换背景图像，颜色填充的空间与图像相同
那是因为您的 .class 元素没有您期望的高度。您看到的只是.row 的填充。尝试添加高度，例如height: 100px; 到您的 .class。
@MohitBhardwaj 是的，我可以添加一个最小高度，它可以解决问题，但是如果我在不同尺寸的屏幕上查看它，它仍然会裁剪一些图片。有意义吗？
是的，这在使用 cover 时是正常的。如果您不希望图像的一部分被截断，您可以使用contain，但在这种情况下，您的图像周围可能会出现空白。您需要根据自己的要求来决定。

标签： html css zurb-foundation

【解决方案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; or padding:0px;

如果这对您有帮助，或者您需要更具体的内容，请告诉我。

【讨论】：