Css寬度與未知高度的高度相同

我正在嘗試創建Google在文本末尾代替省略號或使用overflow:hidden關閉文本的小淡入淡出效果。Css寬度與未知高度的高度相同

我通過創建一個：before元素來完成這個工作，我將它定位在右側。

這是我使用的mixin：

.OverflowFadeRight(@color) 
{ 
    position:relative; 

    &:before { 
     content:""; 
     height:100%; 
     position:absolute; 
     top:0; 
     right:0; 
     width:4.8rem; 
     .GradientLTR(transparent; @color); 
    } 
}

此代碼的工作，但我希望做的是將寬度設置爲相同的高度，它總是成正比的，這是100％的高度家長。

我看過按照寬度設置高度的技巧，但是可以這樣做嗎？

來源

2016-04-11 John Ohara

很好的解決方案 - 我會看看它是否工作在整個項目 –

原來，使用僞元素創建一個帶有height:100%的正方形可能是不可能的。

創建「自適應廣場」的方法是使用img標記。

它允許設置高度，它會按比例自動調整其寬度。

另一種方法是使用寬度的百分比。

這裏是一個demo使用任一。

<!-- Empty image 1x1 pixels as gif base64 data --> 
<div class="OverflowFadeRight2">Real square with img 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""> 
</div>

來源

2016-04-11 08:06:15 Miro

您需要使用object-fit: contain才能達到此結果。

來源

2016-04-11 07:25:14 Dai

感謝您的 - 我努力讓這對我的僞元素上工作，所以不知道它在這種情況下是可行的，但良好的儘管如此 –

Css寬度與未知高度的高度相同

回答

相關問題