How to force a responsive element to retain its aspect ratio [duplicate]


Tags: html,css,html5,css3,aspect-ratio

Problem :

This question already has an answer here:

I have a responsive div that contains a large amount of text and is the same width as its container.

<div>This is a long string of text, but the real text will be a lot longer.</div>

How can I force the div to retain a height which is 50% of its width and stop the contents from overflowing the boundaries using only HTML and CSS?

It should look like this

And this



Solution :

What is the CSS padding trick?

First some information about containing blocks for reference.

9.1.2 Containing blocks
In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

Now, here's the trick.

Padding
* Percentages: refer to width of containing block

It is intuitive that horizontal padding percentages would reference the width of the containing block. However, vertical padding percentages also refer to the width, not the height.

What does that mean for maintaining aspect ratio?

What this means is that if you have an element which is the same width as its parent, and you set padding-bottom: 50%, the element will be half as wide as it is tall.

<div style="padding-bottom: 50%;"></div>

However, if the element is less than the full width of its parent, because the padding property refers to the parents width the numbers will change.

For example, if the element is half the width of its parent and you set padding-bottom: 50%, it will be as tall as it is wide.

<div style="width: 50%; padding-bottom: 50%;"></div>

This is because percentages for the padding property are relative to the containing block, not the element.

To make an element which is half its parent's width retain an aspect ratio of 2:1 (half as tall as it is wide), cut the percentage in half.

<div style="width: 50%; padding-bottom: 25%;"></div>

How can I use this in the real world?

If the element in question contains any content which takes up space in the document flow, the height will change. To avoid this you can take advantage of another CSS trick.

10.1 Definition of "containing block"
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

  • In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

  • Otherwise, the containing block is formed by the padding edge of the ancestor.

When an element is set to position: absolute it will be positioned in reference to its closest ancestor with position: absolute, position: relative or position: fixed. If the element has no such ancestors, it will positioned in reference to the root element.

This means, if you set position: relative on this new responsive div, you can insert a child with position: absolute and tell it to be the same size as the parent using top: 0; width: 100%; bottom: 0;.

To make sure the contents won't overflow the boundaries set overflow: auto

<div style="position: absolute; top: 0; width: 100%; bottom: 0; overflow: auto;"></div>

This will create an element which retains its aspect ratio and can contain content without changing the aspect ratio.

<div style="padding-bottom: 50%; position: relative;">
    <div style="position: absolute; top: 0; width: 100%; bottom: 0; overflow: auto;">
        Content...
    </div>
</div>

See it in action!


    CSS Howto..

    How can I change the ckeditor iframe CSS styling

    Picture doesn't show up [closed]

    How to conditionally render CSS and JavaScript inside head element of an HTML

    how to apply css to a specific element of a table?

    how is the search mail button implemented?

    How to cancel a CSS style set by 'hover child' selector on event?

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    How to concatenate icons into a single image with ImageMagick?

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How to horizontally center a header that is position:absolute

    How to make semi-transparent select2?

    JQuery: How to change CSS of elements that are with a certain element in one group

    how to display navigationMenu div left side of the slider

    I would like to have the users change the CSS using an optional panel. How should I do this? [closed]

    How to dynamically alter the CSS of a pseudo element with JQuery?

    PHP imagecopyresampled + how to get the best results

    How can I align a div right under another?

    How to remove CSS spaghetti in legacy web app?

    How to add box-shadow to a CSS div with display:table-row? [duplicate]

    How to make a new class

    How to apply a class in the current slide using bxslider?

    Show tooltip content when its hovers

    Show Content if below specific width

    How can I get my menu/logo to be centered instead of all the way to the right?

    How to align text vertical CSS

    How can I center vertically a div in bootstrap?

    How to add CSS stylesheet to aspx.vb table

    How to use the CSS :not selector for classes further up the DOM tree

    How can I make two divs stack whilst still having my text wrap without media queries

    How to wrap two spans into one line with CSS