0

I was wondering how to keep the size of an element (f.ex a cube) on all devices. And when you resize the browser window the element will keep the same "form", but become smaller. What i mean is so when you resize the browser window horizontally, the element (f.ex cube) will keep the same "form". So it wont be more wide than tall.

I know i got to use percentage and not px on the with and height. But when i do that, the element will of course still be the percentage of the current device or screen. I am very bad at describing, so i'm going to give an example instead: When i made a calculator with HTML and CSS on school it fitted the screen perfectly. But the screen on the school is squared (same width as height). And the screen at home is rectangled (not the same width as height). So the calculator at home is to wide. You understand now? If you didn't please let me know.

Here's a picture of how it looks like on my screen home: Full sized browser window home Resized smaller in width window: Smaller in width browser window at home

And sorry for bad describing.. And english.

Tobias Rasmussen
  • 21
  • 2
  • 5
  • 3
    Where's your code? – Michael Coker Jan 27 '17 at 19:28
  • 3
    It sounds like you mean "keep same aspect ratio" instead of "keep same size". It's difficult to tell without an [MCVE](http://stackoverflow.com/help/mcve) but you could always base the width and height of things on the viewport height using something like `width: calc(50vh - 100px);` and `height: calc(50vh - 100px);`. – Paul Abbott Jan 27 '17 at 19:33
  • Ok thanks Paul. Here is my css:. `calcBg{ background-color: #ebebeb; height: 62.5%; width: 30%; position: fixed; top: 15%; left: 36.5%; }` – Tobias Rasmussen Jan 27 '17 at 19:45

1 Answers1

0

I dont know if I get what you mean, but if you do mean "keep aspect ratio" you should try this. Wrap your element in another container, use padding bottom on the container and make your element occupy all its space.

Mariane Caroline
  • 36
  • 6
  • That was what i was meaning! How could i not know that word. Thanks :) – Tobias Rasmussen Jan 27 '17 at 20:10
  • But how would i convert my height and width to an aspect ratio number? This is how my calcBg class looks like `.calcBg{ background-color: #ebebeb; height: 62.5%; width: 30%; position: fixed; top: 15%; left: 36.5%; }` with the buttons as childs. – Tobias Rasmussen Jan 27 '17 at 20:29
  • It is a bit dificult to get what u mean without some code, could you make a jsfiddle so I can see what u want? – Mariane Caroline Jan 28 '17 at 16:35