確定僞元素圖像的大小以匹配容器

我一直在嘗試將僞元素圖像添加到標題標題。我設法讓它顯示在我想要的位置，但我真的很努力使圖像與標題大小動態縮放。因此，當標題爲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

確定僞元素圖像的大小以匹配容器

回答

相關問題