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

Posted 2021-05-02

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

要求 ：

• 只有CSS
• 无论视口的方向（横向或纵向）如何，方块的大小都必须适应视口的最小尺寸（宽度或高度）。
• 方形必须在视口中水平和垂直居中

例：

答案

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

1. vmin单位： vmin视口高度和宽度之间最小值的1/100。 （来源：MDN）
2. position: absolute和margin: auto;为中心

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

特征 ：

• 根据宽度和高度保持宽高比
• 在水平和垂直方向上保持在视口中心
• 永远不会溢出视口

浏览器支持：

IE10 +（vmin）为IE9支持支持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>

另一答案

您可以使用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>

另一答案

我结合了@ 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;
    }
}

另一答案

使用这样的东西

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

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

DEMO

以上是关于根据宽度和高度保持纵横比的主要内容，如果未能解决你的问题，请参考以下文章

通过保持纵横比和宽度调整 UIImage 的大小

根据高度保持div纵横比

根据高度保持div的纵横比[重复]

jquery animate 使用方形矩形图像创建缩小效果以适应窗口宽度或高度并保持纵横比

保持div的纵横比但在CSS中填充屏幕宽度和高度？

ImageView 填充父母的宽度或高度，但保持纵横比