Question

我正在寻找background-size: cover;

的帮助

所以我遇到的问题是我在我的图像框上有填充但是在CSS中设置了背景图像似乎是图像覆盖图像框填充而不是填充内部。

我想知道是否有办法通过background: url()和background-size并将其放在填充内而不是覆盖填充。

到目前为止：

.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  padding: 4px 0px;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}

<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>

Answer 1

您可以使用边框而不是填充。

类似的东西：

.image-container div.image {
  padding: 4px 0px; /* remove this */
  ...
  border-top: 4px solid transparent; /* or whatever color */
  border-bottom: 4px solid transparent; /* or whatever color */
  box-sizing: border-box;
  background-size: cover;
}

＆＃13;

.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  border-top: 4px solid green; /* using a color just for demo. */
  border-bottom: 4px solid green; /* using a color just for demo. */
  box-sizing: border-box;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}

＆＃13;

<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>

＆＃13;

从上面的演示片段中，您可以看到边框高于图像。

（背景大小：封面）覆盖填充

1 个答案: