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>

内部具有固定大小的对象：在伪元素之前或之后

1 个答案: