CSS宽度与高度相同但高度未知 [英] Css width the same as height with unknown height

问题描述

我正在尝试创建Google在文本末尾使用的那些淡入淡出效果中的一种，而不是省略号，或者只是通过 overflow:hidden 截断文本.

I'm trying to create one of those little fade effects that Google uses at the end of text instead of an ellipsis or simply cutting the text off with overflow:hidden.

我通过创建一个:before元素来做到这一点，该元素位于我的右侧上方.

I do this by creating a :before element, that I position over the right hand side.

这是我使用的mixin:

Here's the mixin I use:

.OverflowFadeRight(@color)
{
    position:relative;

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

此代码有效，但是我想做的是将宽度设置为与高度相同，因此它总是成比例的，即父代的高度的100％.

This code works, but what I would like to do is set the width to the same as height so it's always proportional, which is 100% the height of the parent.

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

I've seen techiques which set height based on width, but can it be done this way round?

推荐答案

结果证明，使用伪元素创建 height:100％的正方形可能是不可能的.

Turns out that creating a square with height:100% using pseudo elements may not be possible.

创建响应正方形"的方法是使用 img 标签.

The way to create a 'responsive square' is to use the img tag.

它允许设置高度，并且会按比例自动调整其宽度.

It allows to set the height and it will proportionally auto-adjust its width.

替代方法是使用宽度百分比.

The alternative to that is to use percentage off the width.

这是一个 演示 之一.

Here's a demo using either one.

<!-- 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>

这篇关于CSS宽度与高度相同但高度未知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！