CSS宽度与高度相同，高度未知答案

【问题标题】：Css width the same as height with unknown heightCSS宽度与高度相同，高度未知
【发布时间】：2016-04-11 16:06:15
【问题描述】：

我正在尝试创建一种 Google 在文本末尾使用的小淡入淡出效果，而不是省略号或简单地使用 overflow:hidden 截断文本。

我通过创建一个 :before 元素来做到这一点，我将其放置在右侧。

这是我使用的 mixin：

.OverflowFadeRight(@color)
{
    position:relative;

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

此代码有效，但我想做的是将宽度设置为与高度相同，因此它始终成比例，即父级高度的 100%。

我见过根据宽度设置高度的技术，但是可以这样来做吗？

【问题讨论】：

不错的解决方案 - 我会看看它是否适用于整个项目

标签： css

【解决方案1】：

您需要使用object-fit: contain 来实现此结果。

【讨论】：

谢谢你 - 我正在努力让它在我的伪元素上工作，所以不确定它在这种情况下是否可行，但仍然是一个不错的选择

【解决方案2】：

事实证明，使用伪元素创建带有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>

【讨论】：