确定伪元素图像的大小以匹配容器

我一直在尝试将伪元素图像添加到标题标题。我设法让它显示在我想要的位置，但我真的很努力使图像与标题大小动态缩放。因此，当标题为H1时，图像很好，但将标题缩小为H5，图像保持相同大小并与其他内容重叠。问题的确定伪元素图像的大小以匹配容器

实施例：

enter image description here

的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>

少：

/* 
* 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; 
    } 
} 
} 
}

任何人都可以指向正确的方向吗？

来源

2014-10-01 Burgi

可以在设置高度为100％？或者将其设置为背景图片，然后使用背景大小的属性 – Pete 2014-10-01 11:12:54

@Pete我可以使用background-size属性来构建解决方案，因此您的表达正确无误。由于内容不被视为内联替换元素，因此使用100％的高度似乎不起作用，所以通常的技巧不适用，因为伪元素在常规内容流之外。 – 2014-10-01 11:29:30

如果您可以将您的图标图像作为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>

来源

2014-10-01 11:23:59

谢谢马克，我曾看过背景大小，但只有固定大小，我不知道包含选项。精彩的工作。 – Burgi 2014-10-01 12:19:14

确定伪元素图像的大小以匹配容器

回答

相关问题