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

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;
}

.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;
}

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

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