Create responsive div element

Question

I don't know if the title is quite correct, but what I want basically is to create a div element that stays proportional to the resolution of the screen. For example, if the width is 1900px I want that the div have:

width: 1115px;
height: 775px;

But if the width of the page is 1050px I want:

width: 620px;
height: 430px;

What should be my CSS to allow this?

So I want that the width is a percentage of the screen, let's say, and the height is based on the width.

Do you mean set those sizes using `media queries`? Or you want them to always size and retain their aspect ratio? — Toby, Jul 23 '16 at 17:25
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — Mitya, Jul 23 '16 at 17:27
I want that div to mantain the aspect ratio. Those 2 were just an example, if the width is something between 1050 and 1900, I want that div to keep proportional. I think is possible to set a width to the container, then the div width is a percentage of that container (parent). But for the height I also want to be a percentage of the width div — Andre Roque, Jul 23 '16 at 17:31
looks like : div {width:60%;height:40vw;} .... which is your average ratio here — G-Cyrillus, Jul 23 '16 at 18:08

Tobias Skarhed · Accepted Answer · 2016-07-23T19:34:25.357

There are two solutions to make the element proportional to the screen, one which depends on your setup.

You can use percentage

width: 20%;

But this only defines a percentage of the parent element, and does not make both your width and height proportional

You can also use viewport units. This defines a percentage of the viewport. If you use viewport width vw you can get a height which is dependent on the width.

height: 10vw; /*10% of viewport width*/
width: 10vw;

You do have to be aware that this is relatively new, so do not forget to check "known issues" on caniuse.com

You can also setup media queries to handle smaller or bigger screens.

@media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
 .selector {
   width: 90vw;
 }
}

just for the sake of completeness, don't forget to check [known issues for Viewport units](http://caniuse.com/#feat=viewport-units) on Can I use... — deblocker, Jul 23 '16 at 19:28

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

Here is the solution, simply you should calculate the desired aspect ratio, i.e. width/height:

Maintain the aspect ratio of a div with CSS

edited May 23 '17 at 11:58

Community

1
1

answered Jul 23 '16 at 17:37

deblocker

7,629
2
24
59

score 0 · Answer 3 · answered Jul 23 '16 at 17:27

0

You can use CSS media queries, like this:

.selector {
  width: 1115px;
  heigth: 775px;
}

@media (max-width: 1050px) {
 .selector {
   width: 620px;
   height: 430px;
 }
}

answered Jul 23 '16 at 17:27

Wassim Chegham

550
4
15

that way what I would have 2 different sizes depending if the width is less or more then 1050px, but want I want is that the div is resized automatically for "every" width. Basically I want to create an auto resizable div. – Andre Roque Jul 23 '16 at 17:34
So then, you can combine media queries with `vw` and `vh` units as described below: http://stackoverflow.com/a/38544705/6627212 – Wassim Chegham Jul 23 '16 at 17:42

Create responsive div element

3 Answers3