Css genişliği, bilinmeyen yüksekliğe sahip yükseklikle aynı

Question

Google'ın bir elips yerine metnin sonunda kullandığı veya yalnızca metni overflow:hidden ile kesen bu küçük efekt efektlerinden birini oluşturmaya çalışıyorum.

Bunu, a: before öğesi oluşturarak, sağ taraftaki konumlandırmayı yapıyorum.

.OverflowFadeRight(@color) 
{ 
    position:relative; 

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

Bu kod çalışır, ama ne yapmak istiyorsunuz% 100 yüksekliği olan hep orantılı yüzden yükseklikle aynı genişliği ayarlanır: Burada

kullandığım mixin var ebeveyn.

Genişliğe göre yükseklik ayarlayan teknikler gördüm, ancak bu şekilde yapılabilir mi?

Answer 1

Sözde öğeleri kullanarak height:100% ile bir kare oluşturmanın mümkün olmadığı ortaya çıkabilir.

bir 'duyarlı kare' oluşturmak için bir yol img etiketi kullanmaktır.

Yüksekliği ayarlamasına izin verir ve genişliğini orantısal olarak otomatik olarak ayarlar.

Bunun alternatifi genişlikten yüzde kullanmaktır.

Bir tane kullanarak bir 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

Bu sonucu elde etmek için object-fit: contain kullanmak gerekir.