fixed aspect ratio in div, no matter the screen

Question

I have a div I would like to mantain aspect ratio 2:1 no matter the screen size and ratio are.

This is my choice (discarding other previous options)

.mydiv{

    background-color: red;
    width: 100%;
    position: absolute;
    height: 50%;
}

<div class="mydiv">
    this should be a fixed aspect ratio div
  </div

I tried media queries and this: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp but it is not what I'm looking for because of the white padding space

Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — Temani Afif, Jan 15 '18 at 08:00

Bhuwan · Answer 1 · 2018-01-15T07:32:52.587

1

Set left and top property .mydiv to 0 and also set margin:0 to body to remove the extra space.

Stack Snippet

body {
  margin: 0;
}

.mydiv {
  background-color: red;
  width: 100%;
  position: absolute;
  height: 50%;
  left: 0;
  top: 0;
}

<div class="mydiv">this should be a fixed aspect ratio div
  </div

I hope this will help you!

edited Jan 15 '18 at 07:32

answered Jan 15 '18 at 07:12

Bhuwan

16,525
5
34
57

score 1 · Answer 2 · answered Jan 15 '18 at 07:36

1

try this

.mydiv{

    background-color: red;
    width: 100vw;
    height: 50vh;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

<div class="mydiv">
    this should be a fixed aspect ratio div
  </div

answered Jan 15 '18 at 07:36

satyajit rout

1,623
10
20

score 0 · Answer 3 · answered Jan 15 '18 at 07:51

You can use padding-bottom and choose the percentage according to your desired ratio

.mydiv{
    background-color: red;
    width: 100%;
    padding-bottom: 50%;
    position: absolute;
}

<div class="mydiv">
    this should be a fixed aspect ratio div
  </div

fixed aspect ratio in div, no matter the screen

3 Answers3