CSSの幅が未知の高さと同じ高さ

Question

Googleが省略記号の代わりにテキストの末尾に使用する小さなフェード効果の1つを作成しようとしています。または単にテキストをoverflow:hiddenで切り捨てています。

これを行うには、：before要素を作成します。これは、私が右側に配置します。ここで

は、私が使用してミックスインです：

.OverflowFadeRight(@color) 
{ 
    position:relative; 

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

このコードは動作しますが、それは常に比例しますので、私は何をしたいことの高さが100％である、高さと同じに幅を設定されています親。

私は、幅に基づいて高さを設定する技術を見ましたが、この方法で行うことはできますか？

Answer 1

疑似要素を使用して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> 

Answer 2

この結果を得るには、object-fit: containを使用する必要があります。