根据宽度和高度保持纵横比

Question

可以div在视口中放置一个正方形并使其居中,并始终根据宽度和高度保持其纵横比？

要求 :

• 只有CSS
• 无论视口的方向(横向或纵向)如何,方块的大小都必须适应视口的最小尺寸(宽度或高度).
• 正方形必须在视口中以水平方向和垂直方向居中

例:

Answer 1

要在视口中根据宽度和高度保持div的宽高比,可以使用一个HTML标记:

1. vmin单位:

   vmin视口高度和宽度之间最小值的1/100.
   (来源:MDN)

2. position: absolute并margin: auto;为中心

DEMO(调整窗口高度和宽度以查看其运行情况)

特征 :

• 根据宽度和高度保持宽高比
• 保持在视口中心和verticaly中心
• 永远不会溢出视口

浏览器支持:

vmin对于IE9支持,IE10 +(canIuse)支持单位,你需要使用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>

Answer 2

您可以使用vw和vh单位(视口百分比长度)来确定响应方块的大小.

检查浏览器支持: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>