1

I need to make div fit to browser keeping 4:3 aspect ratio.

screenshot How to make this with CSS only? All the solutions I've seen here won't help to make div fit.

Jury
  • 431
  • 5
  • 15

2 Answers2

3

For portrait screens, use a width of 100vw (the width of the window) and a height of 75vw (75% of the width of the window). For landscape screens, base the shape of the div on the height rather than the width.

body {
  margin:0;
}
div {
  width: 100vw; height:75vw;
  background:#BBB;
  margin:0 auto;
}

@media screen and (min-aspect-ratio: 4/3) {
  div {
    width:133.33vh; height:100vh;
  }
}
<div></div>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
1

Check here if it answers your question Maintain the aspect ratio of a div with CSS

You can always go for javascript as well. Hope the link will help you

Community
  • 1
  • 1
Deepak Rai
  • 52
  • 1
  • 2