Поддерживать соотношение сторон по ширине и высоте

В окне просмотра можно разместить и центрировать квадрат div и всегда поддерживать его в соответствии с шириной и высотой?

Требования:

  • только CSS
  • размер квадрата должен адаптироваться к наименьшему размеру (ширине или высоте) окна просмотра независимо от ориентации (пейзаж или портрет) окна просмотра.
  • квадрат должен быть ориентирован по горизонтали и вертикали в окне просмотра.

Пример:

Maintain aspect ratio according to width and height of viewport

Ответы

Ответ 1

Чтобы поддерживать соотношение сторон div в соответствии с шириной и высотой в области просмотра, вы можете использовать один тег HTML с:

  1. vmin единицы измерения:

    vmin 1/100 минимального значения между высотой и шириной области просмотра.
    (источник: MDN)

  2. position: absolute и margin: auto; для центрирования

DEMO (измените высоту и ширину окна, чтобы увидеть его в действии)

Особенности:

  • сохраняет пропорции в соответствии с шириной и высотой
  • центрируется в области просмотра по горизонтали и вертикали
  • никогда не переполняет область просмотра

Поддержка браузера:

Модули vmin поддерживаются IE10+ (canIuse) для поддержки IE9, вам нужно использовать запасной вариант с блоками vm вместо vmin следующим образом:

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

Полный код:

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

Вы можете получить отзывчивый квадрат, используя vw и vh units (длина видео в процентах) для его размера.

Проверьте поддержку браузера: http://caniuse.com/viewport-units

Решение, которое реализует горизонтальное и вертикальное масштабирование

Страница с живыми образцами: 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

Я объединил отличные ответы от @ken-sharpe и @easwee, чтобы создать версию для неквадратных пропорций: 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

Используйте что-то вроде этого

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

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

DEMO