• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Trying to force an aspect ratio on a container within a container

Engaged ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

Imagine a simple container acting as a column, like a newspaper's. Inside this column will be paragraphs of text, and the occasional image. The column's actual width will fluctuate with different screen resolutions.

 

I rarely use straight-up IMG tags, so the image will actually be either a DIV or A (with background-image applied) set to 100% width. As for the height, I'd like that to be proportionately 16:9 with the width. The background-size will be cover, so clipping is expected and even welcome for non-16:9 sources.

 

TL;DR  No matter how wide or narrow that column is set to be, the DIV or A inside should adjust its height to maintain that 16:9 aspect ratio with the 100% width.

 

Thanks!

 

PS: Ideally, I would like to do this with CSS alone. If it can't be done without jQuery, then I'll take it as Plan B. If it can't be done at all with those two technologies, I'll just drop the idea.

Views

214

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
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 24, 2021 Mar 24, 2021

This should do the trick...

<style>
.aspect-container {
position: relative;
padding-bottom: 56.25%; 
height:0;
background-size:cover;
background-image:url("_images/16by9.jpg");
}
</style>

Make a div container with class="aspect-container" and leave it empty. Then just swap out the image path to your 16:9 image.


Votes

Translate

Translate
Community Expert ,
Mar 24, 2021 Mar 24, 2021

Copy link to clipboard

Copied

This should do the trick...

<style>
.aspect-container {
position: relative;
padding-bottom: 56.25%; 
height:0;
background-size:cover;
background-image:url("_images/16by9.jpg");
}
</style>

Make a div container with class="aspect-container" and leave it empty. Then just swap out the image path to your 16:9 image.


Votes

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
community guidelines
Engaged ,
Mar 26, 2021 Mar 26, 2021

Copy link to clipboard

Copied

From a purely logical standpoint, I don't see why that bit of code wouldn't work. Thanks!

 

Any drawbacks to this method? Specifically with regards to applying it on 'A' (ie link) objects? I don't suppose replacing the content area with pure padding would change much, at least at first glance... that area would still be considered within the boundaries of the box, so it would all still be clickable; but I figured I'd ask anyway.

Votes

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
community guidelines
Community Expert ,
Mar 26, 2021 Mar 26, 2021

Copy link to clipboard

Copied

If you want to use it on something that doesn't have block as it's default display value, like the <a> tag, you'll need to add display:block to the css. 

Just in case you ever need 3:2 or 4:3 aspect ratios, you'd just replace the padding-bottom with one of the following...

padding-bottom: 66.66%;  /* 3:2 */
padding-bottom: 75%;  /* 4:3 */

Votes

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
community guidelines
Engaged ,
Mar 26, 2021 Mar 26, 2021

Copy link to clipboard

Copied

LATEST

In this case, display: block was already applied (and is hardly a limitation). I now feel safe marking your answer as correct. Thanks again!

Votes

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
community guidelines