Question

我有以下课程，除了适用于PC的Firefox之外，它适用于所有主流浏览器。具体问题是content处于常规元素上 - 除了::before或::after伪元素之外，Ffx似乎不喜欢它。麻烦的是，::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 */
}

我不想设置高度 - 我希望高度与宽度成正比（由引导程序v3中的col-#确定）。

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

相关问题：Can I change the height of an image in CSS :before/:after pseudo-elements?

JS Fiddle

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

CSS将元素的内容设置为图像

0 个答案: