一個固定大小的內部對象：之前或者：僞元素

後，我知道我可以這樣做：一個固定大小的內部對象：之前或者：僞元素

.container:after { 
    content: url("../images/img.png"); 
    display: inline-block; 
    width: 100%; 
    height: auto; 
}

反正我有沒有引用到的圖像可以實現類似的功能？我需要的是僞元素根據父元素的寬度（例如.container）來改變其高度。與width:100%;height: auto; 非常相似，非常感謝！

來源

2016-03-15 Max Sixblade

你想要什麼的'：after'而不是圖像？ –

任何。我只需要僞元素的固定比例。這樣當.container的寬度發生變化時，之後的高度會相應地按一定的比例變化。 –

我的意思是如果我使用圖像：在它有一定的比例，所以僞元素會有它，但我並不真的需要一個圖像。 –

從我的回答this related question：

在此期間，如果你想成爲能夠調整:after僞元素和系統產生的圖像，你需要將其應用爲背景圖像，而不是並且 - 假設瀏覽器支持不是問題 - 使用background-size以及width和height來對其進行縮放（基於理解這些屬性適用於僞元素框）。

所以，與其

content: url("../images/img.png");

使用

background-image: url("../images/img.png"); 
background-size: cover;

（或簡寫，background: url("../images/img.png") 0 0/cover）

至於按比例縮放的僞元素，我想你應該是能夠使用padding-bottom技巧完成此操作。對於比例爲1的圖像：2，padding-bottom: 200%似乎在這個例子中的工作：

.container { 
 
    border: thick solid; 
 
    margin: 1em; 
 
} 
 

 
.large.container { width: 100px; } 
 
.small.container { width: 50px; } 
 

 
.container::after { 
 
    content: ''; 
 
    display: block; 
 
    background: url(http://placehold.it/100x200) 0 0/cover; 
 
    padding-bottom: 200%; 
 
}

<div class="large container"></div> 
 
<div class="small container"></div>

來源

2016-03-15 05:08:26 BoltClock

這是如何解決「基於父元素寬度的高度的僞元素」？ –

有趣的是，就在上週我建議在W3C樣式中增加'height：width（100％）'特性：https://lists.w3.org/Archives/Public/www-style/2016Mar/0161.html –

@ c-smile：OP在問題的評論中談論比例。此外，我看到該線程 - 任何建議具有屬性值的東西都基於同一元素上的另一個屬性值，因此會失敗，因爲有人會問你如何期待'width：height（100％）; height：width（100％）'來計算，其中兩個屬性彼此具有循環依賴關係。 – BoltClock

一個固定大小的內部對象：之前或者：僞元素

回答

相關問題