Center Div with aspect Ratio

Question

I need to Center a Div in the html viewport. It should be centered both, vertically and horizontally. But the Div should keep its aspect ratio (4/3) and have a minimum margin of 10px.

I made a Javascript:

function resizeWindow() {
 var wHeight = $(document).height() - 20;
 var wWidth = $(document).width() - 20;
 var gameStage = $("#gameStage");
 if ((wWidth / 4) * 3 <= wHeight) {
  gameStage.css("width", wWidth + "px");
  gameStage.css("height", ((wWidth / 4) * 3) + "px");
  gameStage.css("top", (wHeight - ((wWidth / 4) * 3)) / 2 + 9 + "px");
  gameStage.css("left", "10px");
 } else {
  gameStage.css("height", wHeight + "px");
  gameStage.css("width", ((wHeight / 3) * 4) + "px");
  gameStage.css("left", (wWidth - ((wHeight / 3) * 4)) / 2 + 9 + "px");
  gameStage.css("top", "10px");
 }
}

https://jsfiddle.net/3sw06kvb/

But User, who disabled Javascript will not be able to use my website. And a solution with HTML/CSS should be faster(?).

My first Idea is to make a wrapper with

position: fixed 
top, left, bottom, right = 20px;.

But my problem is making a div centering vertically and horizontally while keeping its aspect ratio.

https://jsfiddle.net/xep2mf62/

Do you mean something like this? https://jsfiddle.net/kpLzp9kj/1/ (It's not the perfect result but..) — Mosh Feu, Aug 26 '15 at 05:55

Sooraj · Answer 1 · 2015-08-26T06:18:41.240

2

You can try the following in the CSS. The new units in CSS3 vh and vw allows you to set the height depending on the size of the viewport. height:100vh will give the element a height that is equal to the height of the browser window.

***1vw = 1% of viewport width

1vh = 1% of viewport height***

    .wrapper {
      position: relative;
      width:100%;
      height:100vh;
    }
    .childdivision {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height:50vw;
       width:90vw;
      border:2px solid #444;
    }

<div class="wrapper">
  <div class="childdivision">
    </div>
  </div>

edited Aug 26 '15 at 06:18

answered Aug 26 '15 at 05:52

Sooraj

9,717
9
64
99

1

The problem is not just to center the div, but to keep his ratio (dynamically width and height) – Mosh Feu Aug 26 '15 at 05:57
in that case a height can be set using `viewport` as the unit. – Sooraj Aug 26 '15 at 06:07
1

That's was I propose to @LittleSatan in the question's comment =) – Mosh Feu Aug 26 '15 at 06:10
If the browser is much more wider than higher, the div's height will become to big. It doesn't fit in the viewport anymore. In my javascript, the div will always be completly visible. – Aug 26 '15 at 16:18

score 1 · Answer 2 · answered May 10 '20 at 08:11

Still JS, but simpler

window.onresize = function() {
  resize();
};

function resize() {
  var wrapper = document.querySelector(".wrapper");
  var wrapperwidth = 1920;
  var wrapperheight = 1080;
  var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var ratio = Math.min(vw / wrapperwidth, vh / wrapperheight);
  wrapper.style.transform = `translate(-50%, -50%) scale(${ratio})`;
}

resize();

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1919px;
  height: 1079px;
  overflow: hidden;
  background-color: red;
}

/* demo text (smiley face) */

.wrapper::after {
  content: ":)";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-family: "Roboto", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<div class="wrapper"></div>

Center Div with aspect Ratio

2 Answers2