Css width the same as height with unknown height

Question

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.

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

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);
    }
}

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?

Nice solution - I'll see if it works throughout the project – John Ohara Apr 11 '16 at 08:13 — John Ohara, Apr 11 '16 at 08:13

score 1 · Answer 1 · answered Apr 11 '16 at 07:25

1

You need to use object-fit: contain to achieve this result.

answered Apr 11 '16 at 07:25

dz902

4,782
38
41

Thanks for that - I'm struggling to get this to work on my pseudo element, so not sure it's viable in this instance, but a good option nonetheless – John Ohara Apr 11 '16 at 08:15

score 0 · Accepted Answer · answered Apr 11 '16 at 08:06

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

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 width the same as height with unknown height

2 Answers2

Linked