Using CSS alone, how can I make a dynamically sized 4:3 aspect ratio div also stay centered?

Question

The HTML is dead simple and I'm looking to add as few <div>s as possible as they make code readability a headache.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=720, user-scalable=yes" />
  <title>SharpCraft</title>
  <!-- Stylesheets -->
  <noscript>
    <link rel="stylesheet" href="css/style.css" />
  </noscript>
  <!-- jQuery -->
  <script>
  </script>
</head>

<body>
  <!-- #main -->
  <main id="main">
    <!-- #content -->
    <div id="content">

    </div>
  </main>
</body>

</html>

Regrettably my "style" of CSS development is guess and check so I've mutilated my stylesheet beyond repair. All I know for certain is that the content div should follow the following rules:

#content {
  background: url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
  min-width: 640px;
  min-height: 480px;
  display: table;
}

With the end product resembling the following:

End Product

This solution does not stretch the image proportionally to fill up the browser window. — bjenks22446, Apr 28 '15 at 03:28

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

There are many ways to center an element horizontally and vertically, but I would suggest the CSS table approach, as you're doing it on the main content area, so we need to ensure the scroll bars to work properly when the window size is rather small.

html, body, #table {
    height: 100%;
}
body {
    background: black;
    margin: 0;
}
#table {
    display: table;
    width: 100%;
}
#main {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background: url("http://goo.gl/TVjkjW");
    width: 640px;
    height: 480px;
    margin: 0 auto;
}

<div id="table">
    <div id="main">
        <div id="content"></div>
    </div>
</div>

JSFiddle: http://jsfiddle.net/ykato61n/

(I adjusted the markup slightly to make it work)

edited May 23 '17 at 11:43

Community

1
1

answered Apr 28 '15 at 03:18

Stickers

75,527
23
147
186

I thought using tables for layout was frowned upon. – bjenks22446 Apr 28 '15 at 03:26
@brianjenkins94 table layout is still rock solid in many cases. I don't get aspect ratio part, can you explain more? I might be able to tweak it if necessary. – Stickers Apr 28 '15 at 03:30
Also, after further inspection it occurs to me that this solution does not stretch the image proportionally to fill up the browser window. – bjenks22446 Apr 28 '15 at 03:31
@brianjenkins94 that's the part I don't quite understand about question, is this what you want? - http://jsfiddle.net/ykato61n/1/ – Stickers Apr 28 '15 at 03:34
I'm just looking for the div with the image background to take up as much space as possible. Proportionately speaking, 640:480 is the same as 4:3 which is decimally 1.33 repeating. Ideally I'd like to use a pure CSS approach to stretch the div so that the ratio of the two side lengths keeps the same ratio. Effectively how old TV shows look on widescreen TVs, with the black bars on each side. – bjenks22446 Apr 28 '15 at 03:35
Is there a simple fix to have the black bars only on the left and right? If not, that's fine, you've already been so helpful already. I can't even begin to explain how embarrassingly long I've been working on this today. – bjenks22446 Apr 28 '15 at 03:42
Super close. I was just hoping that the black would recede when the image expands but I think I may have to take a javascript approach to get what I have in mind. – bjenks22446 Apr 28 '15 at 03:56
Check out my solution below the aspect ratio works, and scales with the window. As well as staying the centre of the screen. Pure CSS ;) – jonhurlock Apr 28 '15 at 04:42
@brianjenkins94 this might be actually that you want it to be, make sure to check it out - http://jsfiddle.net/e71vjyxm/ – Stickers Apr 29 '15 at 20:43

jonhurlock · Answer 2 · 2015-04-28T04:33:43.330

Heres a pure CSS solution, it makes use of the transform and translate function from CSS3. It uses minimal HTML and CSS. I've put the content div's background to red, just incase the image disappears for some reason.

#wrap {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: scale(2, 3);
  /* Safari */
  transform: scale(2, 3);
  -webkit-transform: translate(-50%, -50%);
  /* Safari */
  transform: translate(-50%, -50%);
  /* Safari */
  background: red url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
  background-size: cover;
  background-position: center center;
  width: 90%;
  padding-bottom: 67.50%;
  /* sorts out aspect ratio*/
}
body {
  background: #000;
}
#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 640px;
  min-height: 480px;
  /*background:blue;*/
  display: table;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="wrap">
    <div id="content">content</div>
  </div>
</body>

</html>

I'm not sure why you wanted the content div to have display: table;, but have put it in for good measure.

Using CSS alone, how can I make a dynamically sized 4:3 aspect ratio div also stay centered?

2 Answers2