调整伪元素图像以匹配容器

Question

我一直在尝试将伪元素图像添加到标题标题中。我设法让它显示在我想要的位置，但我真的很难让图像随着标题大小动态扩展。因此，当标题是H1时，图像很好，但是减少标题以表示H5，图像保持相同的大小并重叠到其他内容中。

问题示例：

---

---

HTML：

<h1 class="title brand" id="id">some content <small>a sub header</small></h1>
<h5 class="title brand reverse" id="id">some content <small>a sub header</small></h5>

LESS：

/*
 * Headers
 */
h1,h2,h3,h4,h5,h6 {
 font-family: @font-family-emphasis;
 font-weight: 400;
 margin: .75em 0;
 display: block;
}

h1 {
 font-size: @font-size-h1;
}

h2 {
 font-size: @font-size-h2;
}

h3 {
 font-size: @font-size-h3;
}

h4 {
 font-size: @font-size-h4;
}

h5 {
 font-size: @font-size-h5;
}

h6 {
 font-size: @font-size-h6;
}

h1,h2,h3,h4,h5,h6 {
 strong {
  font-weight: 500;
 }

 &.light {
  font-weight: 200;
 }

 &.title {
  border-bottom: solid 1px @color-interface-grey-light;
 }

 &.page-title {
  border-bottom: solid 1px @color-interface-grey;
  margin-bottom: 0.25em;
 }

 .small,small {
  color: darken( @color-interface-grey, 25% );
  font-size: .65em;
 }

 &.brand {
  padding: .5em 0 .5em;
  margin: 0.5em 0 .5em 2.5em;
  &:after{
   content: url("../img/brand-mark.svg");
   position: absolute;
   left:0.5em;
  }

 &.reverse {
  padding: .5em 0 .5em;
  margin: 0.5em 2.5em .5em 0em;
  &:after{
   content: '';
  }
  &:before{
    content: url("../img/brand-mark-reverse.svg");
    position: absolute;
    right:0.5em;
  }
 }
}
}

有人能指出我正确的方向吗？

Answer 1

如果您可以将图标图像作为pseuodo元素的背景，这是一种方法。

此技术依赖于CSS3属性，特别是background-size: contain。

您可能需要根据您的设计为伪元素指定宽度值。

h1, h5 {
  border: 1px dotted gray;
  margin-bottom: 20px;
  position: relative;
}
h1:after, h5:after {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px dashed blue;
  content: '';
  height: 50%;
  width: 50px; /* Tweak this value as needed... */
  background: url(http://placehold.it/50x50) no-repeat right bottom / contain;
}

<h1>some content <small>a sub header</small></h1>
<h5>some content <small>a sub header</small></h5>