Highlighted

Maintaining a DIV's aspect ratio in 2018 = more trouble than it's worth?

Contributor ,
Nov 04, 2018

Copy link to clipboard

Copied

Returning to web building after a few years off, I thought displaying a div with a consistent aspect ratio across all viewport sizes would be a piece of cake. After all, we can animate almost anything now, which was just a dream when I left HTML behind.

However, Googling only the past year of results for up-to-date advice yields disappointing results that essentially amount to using equations like "padding-top: 54.309450094%" with accompanying warnings that maintaining the aspect ratio of a div is probably more trouble than it's worth.

Is it? Should I just drop this idea and go another direction with the layout?

Views

158

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Maintaining a DIV's aspect ratio in 2018 = more trouble than it's worth?

Contributor ,
Nov 04, 2018

Copy link to clipboard

Copied

Returning to web building after a few years off, I thought displaying a div with a consistent aspect ratio across all viewport sizes would be a piece of cake. After all, we can animate almost anything now, which was just a dream when I left HTML behind.

However, Googling only the past year of results for up-to-date advice yields disappointing results that essentially amount to using equations like "padding-top: 54.309450094%" with accompanying warnings that maintaining the aspect ratio of a div is probably more trouble than it's worth.

Is it? Should I just drop this idea and go another direction with the layout?

Views

159

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 04, 2018 0
Mentor ,
Nov 04, 2018

Copy link to clipboard

Copied

This might be useful reading for you:

Responsive CSS Layout Builder for Dreamweaver: Tutorials

Other than to display "Google-ish" things like YouTube videos and other widgets delivered via iframes, there should be no reason to want to have a DIV maintain an aspect ratio. The height of a DIV should be determined by its content. Another case in point would involve images. If you place a HD (16:9) image by itself in a DIV and want to maintain the natural aspect ratio of the image you use CSS to make that image scalable:

img {

height: auto !important;

width: auto !important;

max-width: 100%;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 04, 2018 1
Adobe Community Professional ,
Nov 04, 2018

Copy link to clipboard

Copied

Why wou;d maintaining aspect ratio matter on anything except videos and images?

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 04, 2018 1