Maintain aspect ratio according to width and height

问题

It is possible to fit and center a square div in the viewport and always maintain it\'s aspect ratio according to width and height?

Requirements :

only CSS
the size of the square must adapt to the smallest dimension (width or height) of viewport regardless of the orientation (landscape or portrait) of the viewport.
the square must be centered horizontaly and verticaly in the viewport

Example:

$\"Maintain$

回答1:

To maintain the aspect ratio of a div according to width and height in the viewport, you can use one HTML tag with:

vmin units for the sizing :

vmin 1/100th of the minimum value between the height and the width of the viewport.
(source : MDN)
position: absolute and margin: auto; for the centering

DEMO (resize both window height and width to see it in action)

Features :

keeps it's aspect ratio according to width and height
stays centered in viewport horizontaly and verticaly
never overflows the viewport

Browser support :

vmin units are supported by IE10+ (canIuse) for IE9 support, you need to use a fallback with vm units instead of vmin like this :

width: 100vm; /* <-- for IE9 */
height: 100vm; /* <-- for IE9 */
width: 100vmin; 
height: 100vmin;

Full code:

body {
  margin:0; /* To prevent scrollbars */
}

div{
  /* Aspect ratio */
  height:100vm; width:100vm; /* IE9 fallback */
  width: 100vmin; 
  height: 100vmin;
  /*Centering */
  position: absolute;
  top:0;bottom:0;
  left:0;right:0;
  margin: auto;
  /* styling */
  background: gold;
}

<div>whatever content you wish</div>

回答2:

You can achieve a responsive square using the vw & vh units (viewport-percentage lengths) to size it.

Check for browser support: http://caniuse.com/viewport-units

Solution that implements both horizontal and vertical scaling

Live sample page: http://sample.easwee.net/responsive-square/

.container {
    display:table;
    width:100%;
    height:100%;
}

.container-row {
    display:table-row;
}

.container-cell {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.square {
    display:inline-block;
    background:red;
    border: 3px solid blue;
}
@media(orientation:landscape) {
	.square {    	   
	    width: 100vh;
	    height: 100vh;
	}
}
@media(orientation:portrait) {
	.square{
	    width: 100vw;
	    height: 100vw;
	}
}

<div class="container">
	<div class="container-row">
		<div class="container-cell">
    		<div class="square"></div>
    	</div>
	</div>
</div>

回答3:

I've combined the excellent answers from @ken-sharpe and @easwee to create a version for non-square aspect ratios: https://codepen.io/anon/pen/GyqopP

div {
  position: absolute;
  top:0;bottom:0;
  left:0;right:0;
  margin: auto;

  width: 100vw;
  height: 50vw;
  background: #326384;
}

@media (min-aspect-ratio: 2/1) {
    div {          
        width: 200vh;
        height: 100vh;
        background-color:green;
    }
}

回答4:

Use something like this

.container{
    display:block;
    background:#f2f2f2;
}

.square{
    width:50%;
    padding-top:50%;
    margin: auto;
    background:#e5e5e5;
}

DEMO

来源：https://stackoverflow.com/questions/23630140/maintain-aspect-ratio-according-to-width-and-height

标签

css

css3

responsive-design

aspect-ratio