0

我有以下课程，它适用于除 Firefox for PC 之外的所有主要浏览器。具体来说，问题在于content存在于常规元素上——Ffx 似乎不喜欢它出现在除了伪元素::before或::after伪元素之外的任何东西上。麻烦的是，::after不继承其基本元素的大小。

html

<span class="col-3 myImg"></span>

css

.col-3 {
    width:    25%;
}

.myImg {
  /* content:    url('img.png'); works in everything by Ffx on PC */
  display:    block;
  position:   relative;
}
/* v Needed for Ffx on PC */
.myImg::after {
  background: red;
  content:    url('img.png');
  display:    block;
  max-width:  100%; /* affects only the background colour */
  position:   absolute;
  width:      100%; /* affects only the background colour */
}

我不想设置高度——我希望高度与宽度成比例（由col-#bootstrap v3 确定）。

我不想使用一堆图像标签，因为这意味着更新将需要一堆编辑（而不是 css 的一个中央编辑）。

相关的 SO 问题：我可以在 CSS :before/:after 伪元素中更改图像的高度吗？

JS小提琴

编辑我希望图像是基本元素的宽度（跨度）的 100%，并且图像的高度按比例缩放。

4

0 回答 0