Viewport Units, Keeping Aspect Ratio

Viewport units, keeping aspect ratio?

I've made it work in IE10:

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

Live demo: http://jsfiddle.net/C2ZGR/show/ (open in IE10 (preview version available for Windows 7); then re-size window, so that either the width, or height is very small)

I've used an element with the aspect ratio of 16:9, but the code can work for any aspect-ratio - just replace 16/9, and 9/16 with your desired aspect ratio.

Btw, IE10 is the only browser in which this demo will work. Firefox/Opera don't implement viewport units yet, and the WebKit browsers currently have a bug where viewport units cannot be used inside calc().

Maintain aspect ratio according to width and height

The aspect-ratio property (2022)

To maintain the aspect ratio of a div according to width and height, you can use the aspect-ratio property (MDN reference).

This allows you to maintain any aspect ratio according to the viewport size or to the size of the parent element.

Maintaining aspect-ratio according to the viewport size (width and height) :

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

/** For the demo **/

body {
  margin: 0;
}

<div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div>

Maximize div in center of viewport but keep aspect ratio

I think I managed to solve it by combining max-width and max-height.

Below is an example for 2:1 aspect ratio. First, we want width: 100vw to fill the full width and (due to 2:1) height half of that, so height: 50vw. However, if the viewport width gets wider and viewport height decreases, at some point 50vw is going to be bigger than the viewport height. This is covered by max-height: 100vh. So the height never gets bigger than the viewport height. The same works for the width: max-width: 200vh limits the width to double (due to 2:1) the maximum size of the height, which was 100vh.

For 4:3 aspect ratio, it would be 3/4=0.75 height: 75vw and 4/3=1.33 max-width: 133vh and so on.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: red;
}
div#content {
  margin: 0;
  width: 100vw;
  max-width: 200vh;
  height: 50vw;
  max-height: 100vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
}
</style>
<body>
<div id="content"></div>
</body>
</html>

CSS scale several images to fit viewport keeping aspect ratio

Solution :
(I stripped most of your containers to make it simple to understand and work with)

html,body,.section-images {  height: 100%;  margin: 0;}.section-images {  margin: auto 2em;  text-align: center;}img {  display: block;  width: auto;  height: auto;  max-width: 100%;  max-height: 90%;  margin: 20px auto;}

<section class="section-images">  <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>  <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>  <div class="image-description">blabla2</div>  <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div></section>

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

To ensure the box keeps its aspect ratio but never overflows the viewport (which has been specified as width not exceeding 90vw and height not exceeding 90vh) CSS can calculate the best fit:

.box {
  display: inline-block;
  --ratio: calc( 3 / 2);
  /* put the aspect ratio width to height you want */
  --h: min(calc(90vw / var(--ratio)), 90vh);
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
  background-color: red;
}

<div class="box"></div>

CSS maintain div aspect ratio given height

Here's a solution using viewport units. Depending on your audience, this may or may not be the best solution. See http://caniuse.com/#feat=viewport-units for details. Also, depending on the aspect ratio you want, it will go off the screen in some cases. My next suggestion would bring JavaScript into the mix.

Here's a fiddle you can try out: http://jsfiddle.net/Lq7v2gcq/

And the important code:

#vhtest {
    position: relative;
    top: 5vh;
    height: 90vh;
    width: 50vh;
    margin: 0 auto;
    border: 1px solid red;
}

Viewport Units, Keeping Aspect Ratio