如何在针对不同窗口大小自动调整大小的同时保持 Div 元素的宽高比？

在不同的窗口大小中保持自动调整 Div 元素大小的宽高比​​

在 Web 开发中，通常希望有一个中央 div保持特定的纵横比，同时适应窗口大小的变化。然而，找到一个同时有效调整宽度和高度的解决方案可能具有挑战性。

当前方法

提供的 CSS 和 HTML 代码创建一个居中的 div，它保持固定大小。当窗口尺寸变小时，div 会缩小，但不会以保留其原始宽高比的方式缩小。

使用宽高比属性的解决方案

解决此问题，您可以利用纵横比属性。此属性现已得到广泛支持，允许您为元素的尺寸指定固定比例。

<br>body {<br> height: 100vh;<br> margin: 0;<br> 显示：flex;<br> 对齐内容：中心;<br> 对齐项目：中心;<br>背景: 灰色;<br>}</p>
<p>.stage {<br> --r: 960 / 540;</p>
<p>纵横比: var(--r);<br> 宽度:分钟（90％，分钟（960px， 90vh*(var(--r))));</p>
<p>显示：flex;<br>对齐内容：中心;<br>对齐项目： center;</p>
<p>背景：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

登录后复制

}

1. 计算纵横比： -- r 变量存储长宽比，计算为所需尺寸的宽度/高度 (960 / 540).
2. 设置纵横比：纵横比属性将纵横比设置为计算值。这可确保元素始终保持该比例。
3. 计算宽度： 宽度属性是使用 min() 函数设置的，该函数考虑原始宽度，即可用窗口宽度的 90%，和计算出的纵横比的 90vh 倍。此公式可确保元素缩小以适应窗口，同时保持其纵横比。
4. 将 Div 居中并设置样式： div 使用 Flexbox 居中，其背景采用渐变样式证明即使元素缩小时长宽比也能保持不变。

该解决方案有效确保 div 元素在适应时保持其长宽比不同的窗口尺寸，宽度和高度。

以上是如何在针对不同窗口大小自动调整大小的同时保持 Div 元素的宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！