如何使用 CSS 保持宽高比并使 Div 居中？

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

确保 div 保持其纵横比对于响应式设计至关重要。这可以确保元素的比例保持一致，无论其尺寸或方向如何。

要仅使用 CSS 实现此目的，我们可以利用现代的 aspect-ratio 属性。

Aspect -Ratio 属性

aspect-ratio 属性指定元素的宽高比。例如，值 1 / 1 将创建一个正方形，而 16 / 9 将创建一个与 16:9 显示器具有相同宽高比的矩形。

水平和垂直居中 Div

要将元素在其父元素中水平和垂直居中，我们可以使用以下 CSS 属性：

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

示例代码

结合宽高比和居中属性，我们可以创建一个在视口居中的同时保持其纵横比的方形 div：

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

此代码将创建一个占据整个视口的方形 div，同时保持 1:1 的纵横比。 div 也将在视口内水平和垂直居中。

附加说明

• 尚未在所有浏览器中支持宽高比属性，但在现代浏览器中支持例如 Chrome、Firefox 和 Safari。
• 为了确保与旧版浏览器的兼容性，您可以使用 [picturefill](https://github.com/scottjehl/picturefill) 或 [respond.js](https ://github.com/scottjehl/Respond）。

以上是如何使用 CSS 保持宽高比并使 Div 居中？的详细内容。更多信息请关注PHP中文网其他相关文章！