Css 使用：after/：before psuedo调整背景图像大小

我已经使我的背景图像在我的：后psuedo中响应，但无法控制高度响应，因此我的图像底部有一个很大的空白

我的CSS：

.element:after {
    content:'';
    background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
    background-size:100%;
    height:284px;
    display:block;
}

小提琴：

我见过一些其他类似的问题，但没有一个讨论过如何使高度响应。我看到你可以尝试“背景宽度：100%100%；”之类的东西，但这对我不起作用

---

让我知道我做错了什么

CSS中没有背景宽度这样的东西。您考虑的是

背景大小

，它应该完全符合您所描述的内容

---

更具体地说

背景尺寸：覆盖

以填充元素而不扭曲比例。很抱歉，我的意思是“背景尺寸”，但它仍然不能正常工作。它不会显示图像，除非像上面我的代码中那样设置了固定高度。另外，“背景尺寸：封面”根本不能缩放图像。@AnthonyRusso给我们展示一个JSFIDLE，这样我们就可以看到它在做什么。你说的“使高度响应”是什么意思？我的意思是图像坐在小提琴上时是响应的。但如果检查元素，由于设置的高度，您将在图像下方看到一个巨大的空白。我试图避免空白。不要

背景尺寸：封面做你想做的事？请看：这实际上并没有缩放图像。我的方法很完美，只需要将图像下方的空白从设置为284px的高度中删除。好的，我现在知道你想要什么了。您想要的是非常困难的，因为psuedo元素将不知道应该是什么高度，除非您将其设置为特定高度。你可以选择a。使用
或b。使用包含填充的技巧（仅当您知道图像的纵横比时才可能）。见：