Maintain the aspect ratio of a div with CSS styling

Question

Maintain the aspect ratio of a div with CSS styling

Attempting to create a div while maintaining a 16:9 aspect ratio using CSS led me to conduct a Google search. Fortunately, I stumbled upon a helpful resource on Stack Overflow that detailed how to achieve this: How to maintain the aspect ratio. Excited to implement this myself, I encountered an issue when inserting text within the div, resulting in a change in the aspect ratio from 16:9.

Check out the JSFiddle here!

The problem arises when adding li elements as children; this distorts the desired aspect ratio. How can we ensure the aspect ratio remains intact even with text content?

Code Snippet:

div {
width: 70%;
}
ul {
padding-bottom: 56.25%;
background: green;
}

<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

html css

Answer 1

Answer №1

Create a div with the desired aspect ratio using the padding technique explained in the provided link.
Position the div as relative, absolute, or fixed and insert a child element inside it. Position this child element absolutely with top, bottom, left, and right set to 0. The child will always maintain the same aspect ratio as the outer div, regardless of its content.
If necessary, apply overflow:hidden to the inner element.

Example HTML:

<div class="outer">
    <ul class="inner">
        <li>Insert list items here</li>
        <li>...</li>
    </ul>
</div>

Corresponding CSS:

.outer {
    padding-bottom: 56.25%; // 9/16
    position: relative; // or absolute or fixed, avoiding static
}

.inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; // or scroll, auto
}

Answer 2

Create a div with the desired aspect ratio using the padding technique explained in the provided link.
Position the div as relative, absolute, or fixed and insert a child element inside it. Position this child element absolutely with top, bottom, left, and right set to 0. The child will always maintain the same aspect ratio as the outer div, regardless of its content.
If necessary, apply overflow:hidden to the inner element.

Example HTML:

<div class="outer">
    <ul class="inner">
        <li>Insert list items here</li>
        <li>...</li>
    </ul>
</div>

Corresponding CSS:

.outer {
    padding-bottom: 56.25%; // 9/16
    position: relative; // or absolute or fixed, avoiding static
}

.inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; // or scroll, auto
}

Answer 3

Answer №2

To prevent your padding from being affected, you must ensure that your ul is positioned absolutely within the green div. Use the following CSS code:

#green-div {
    width: 70%;
    position: relative;
}
#inner-list {
    padding-bottom: 56.25%;
    background: green;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Answer 4

To prevent your padding from being affected, you must ensure that your ul is positioned absolutely within the green div. Use the following CSS code:

#green-div {
    width: 70%;
    position: relative;
}
#inner-list {
    padding-bottom: 56.25%;
    background: green;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Maintain the aspect ratio of a div with CSS styling

Check out the JSFiddle here!

Answer №1

Answer №2

Similar questions

How can I incorporate a .shtml file into a .php webpage?

In AngularJS, the process of replacing text using a filter can be achieved by following

Employing AJAX to extract data from SQL database and display it in a tabular format

Add a CSS class to a different element when hovering

Version 1.0 and higher of Ionic do not display the side menu when using tabs

Utilize CSS to showcase the full-size version of a clicked thumbnail

Generating CSS and PHP through Grunt

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

The select2 option seems to be malfunctioning as it is not

The only functional button in the table is the one located on the top row

Is there a simpler way to retrieve data from PHP or to efficiently filter the data once it's been retrieved?

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

Need to transfer a variable from the left side to the right side within Javascript. The instructor demonstrated using up and down as an

Aligning the page content in perfect harmony with the footer

The HTML <select> element is currently styled with a locked CSS, but I am looking to have it displayed with the default

Automatically omitting a selector that mimics a switch

Designing a charcoal square div featuring a see-through circular element at its center

showing database table contents on a website page

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

JavaScript generated form fails to submit