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宽度与未知高度的高度相同

回答

相关问题