在 :before 或 :after 伪元素内具有固定大小的对象

Question

我知道我可以这样做：

.container:after {
    content: url("../images/img.png");
    display: inline-block;
    width: 100%;
    height: auto;
}

有没有我可以在不参考图像的情况下实现类似的功能？我需要的是伪元素根据父元素的宽度（例如.container）来改变它的高度。与width:100%; height: auto; 的图像非常相似 非常感谢！

Answer 1

来自我对this related question的回答：

与此同时，如果您希望能够调整 :after 伪元素和生成的图像的大小，则需要将其应用为背景图像，并且 - 假设浏览器支持不是问题 -使用 background-size 以及 width 和 height 来缩放它（基于这些属性适用于伪元素框的理解）。

所以，而不是

content: url("../images/img.png");

使用

background-image: url("../images/img.png");
background-size: cover;

（或简写，background: url("../images/img.png") 0 0 / cover）

至于按比例缩放您的伪元素，我认为您应该能够使用padding-bottom 技巧来完成此操作。对于比例为 1:2 的图像，padding-bottom: 200% 似乎在此示例中有效：

.container {
  border: thick solid;
  margin: 1em;
}

.large.container { width: 100px; }
.small.container { width: 50px; }

.container::after {
  content: '';
  display: block;
  background: url(http://placehold.it/100x200) 0 0 / cover;
  padding-bottom: 200%;
}

<div class="large container"></div>
<div class="small container"></div>