Question

我正在尝试在div中设置背景图片，并使用浏览器调整背景图片的大小。宽度可以正常工作，但是我无法使高度伸展或缩小。

使用content:url可以完全按照我的意愿使用，但仅适用于Chrome。

.bg01 {
   content:url('images/bg.jpg');
   max-width:100%;
}

我尝试了以下方法，宽度不错，但高度确实发生了变化

.bg01 {
   background-image:url('images/bg.jpg');
   background-repeat: no-repeat;
   display: inline-block;
   width:750px;
   height: 240px;
   background-size:contain;
}

Answer 1

在我看来background-size: cover是您想要的，而不是包含的。

编辑：查看您的评论后，我想我会更好地了解您的要求。您是否有理由只使用CSS？由于content: url(...)基本上与将图像添加到标记中相同，因此您可以使用以下方法实现完全相同的事情：

/* using content: url(...) */

.content-url {
  content: url('https://static.magento.com/sites/default/files8/styles/column_4/public/WEB-2612_Listing_Images_Events_r1v1_b_16.jpg?itok=cVv6YfZf');
  max-width: 100%;
}


/* using an img tag */

.markup > img {
  max-width: 100%;
}

<p>using content: url(...):</p>
<div class="content-url"></div>

<br><br>

<p>using an img tag:</p>
<div class="markup">
  <img src="https://static.magento.com/sites/default/files8/styles/column_4/public/WEB-2612_Listing_Images_Events_r1v1_b_16.jpg?itok=cVv6YfZf" alt="">
</div>

此外，对content: url()的支持实际上是相当不错的，包括最新版本的firefox，safari和甚至edge和ie11：https://caniuse.com/#search=content%3A%20url

Answer 2

以下是使用“封面”的示例。我不记得在95％的情况下都使用了掩护以外的任何东西。基本上-总是覆盖-除非是重复的背景图案。

html, body {
  height: 100%; /* they don't know how tall they are... */
}

body {
  background-image: url('https://placehold.it/2000x2000');
  background-size: cover;
  background-position: center center;
}

https://jsfiddle.net/sheriffderek/6cyz1mLk/除了身体上的例子

Answer 3

body{
  background-image: url("https://placehold.it/2000x1024");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Answer 4

请检查下面的代码，希望它能满足您的要求，并获得与content：“”相同的结果，您必须通过更改与实际图像纵横比相同的填充值来设置背景div的纵横比。：）

.content-box { margin-bottom: 10px;; content: url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg); width: 100%;}
.bg-box { background: url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg) no-repeat top left / 100% auto;}
.bg-box::after { content: ""; position: relative; top: 0; left: 0; padding-top: 100%; display: block;}

<html>
    <head><title>bg image same as content css</title>
    </head>
<body>
    <div class="content-box"></div>
    <div class="bg-box"></div>
</body>
</html>

背景图片调整高度

4 个答案: