Skip to main content
U
Under S.
Inspiring
November 4, 2018
Question

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

  • November 4, 2018
  • 2 replies
  • 331 views

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?

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 4, 2018

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

    Nancy O'Shea— Product User & Community Expert
    ALsp
    ALsp
    Legend
    November 4, 2018

    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%;

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices