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

Posted 2023-03-05

【中文标题】根据宽度和高度保持纵横比

【英文标题】：Maintain aspect ratio according to width and height

【发布时间】：2014-07-01 01:28:42

【问题描述】：

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

要求：

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

例子：

【问题讨论】：

检查这个fiddle..虽然我不确定垂直..

外部 div 应该是窗口，内部正方形应该适合它，但是当它高于更宽时它不起作用

【参考方案1】：

使用类似的东西

.container
    display:block;
    background:#f2f2f2;


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

DEMO

【讨论】：

它不起作用，因为它只使用宽度来设置正方形大小

【参考方案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>

【讨论】：

@Mr_Green 你的意思是同时垂直和水平？

是的，正方形的大小应该是宽度和高度之间的最小值

@TheGr8_Nik 需要尝试一下 - 如果我得到任何可靠的结果会报告。

@easwee - 我用web-tiki 回答更改了支票，因为他取得了相同的结果，但很简单

【参考方案3】：

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

vmin 尺寸单位：

vmin 视口高度和宽度之间最小值的 1/100。 （来源：MDN）

position: absolute 和 margin: auto; 用于居中

DEMO（调整窗口高度和宽度以查看实际效果）

特点：

根据

宽度和高度

保持其纵横比 在视口中水平和垂直居中 永远不会溢出视口

浏览器支持：

IE10+ (canIuse) 支持vmin 单位以获得 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>

【讨论】：

关于 ie10 的注意事项：caniuse 说：IE9 中的部分支持是指支持“vm”而不是“vmin”——所以这里不适用，因为我们没有使用 vmin

设置body margin为0也很关键

【参考方案4】：

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

【讨论】：

这一定是我在 SO 上看到的最被低估的答案之一。我花了几个小时才终于找到了非方形纵横比的工作解决方案。非常感谢您，先生。