纯CSS技巧：实现内部元素固定宽高比并居中缩放

本文介绍如何仅用CSS和Less实现内部元素宽高比固定且居中缩放的技巧。 许多前端场景需要在一个大小未知的容器内，保持内部元素的4:3宽高比不变，并居中最大化利用容器空间。文章通过`aspect-ratio`属性设置宽高比，并利用`flex`布局实现元素的水平和垂直居中，配合`max-height`和`max-width`限制元素尺寸，最终达到在不同容器大小下，内部元素保持宽高比并居中显示的效果，无需任何JavaScript代码。 该方法简洁高效，适用于各种需要保持宽高比且居中显示的场景，例如图片展示等。

css3 实现内部元素宽高比固定且居中缩放

许多前端开发场景中，需要在一个大小未知的容器内，保持内部元素的宽高比不变，同时还要保证该元素居中显示并最大化地利用容器空间。本文将探讨如何仅使用 css (以及 less) 来实现这一需求，无需借助 javascript。

问题描述如下：外部 div 包裹内部 div，内部 div 需要保持固定的宽高比（例如 4:3），而外部 div 的宽高是未知的。内部 div 必须居中显示，并尽可能放大，直到它的宽度或高度触碰到外部 div 的边界。换句话说，如果外部 div 的宽高比大于 4:3，则内部 div 的高度应该与外部 div 的高度一致；反之，内部 div 的宽度应该与外部 div 的宽度一致。

解决方案的关键在于 css 的 aspect-ratio 属性和 flex 布局。 aspect-ratio 属性可以轻松地设置元素的宽高比。 而 flex 布局则可以方便地实现元素的居中对齐。

以下 css 代码片段展示了如何实现这一目标：

.outer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #aaa; /* 可选：添加边框方便观察 */
}

.inner {
    aspect-ratio: 4 / 3;
    max-height: 100%;
    max-width: 100%;
}

配合相应的 html 结构：

<div class="outer">
    <img class="inner" src="图片地址" />
</div>

这段代码中，.outer 类使用 flex 布局，align-items: center; 和 justify-content: center; 保证内部元素 .inner 水平和垂直居中。.inner 类使用 aspect-ratio: 4 / 3; 设定宽高比为 4:3，max-height: 100%; 和 max-width: 100%; 则限制了内部元素的最大高度和宽度，使其不会超过外部容器的大小。 通过 max-height 和 max-width 的限制，浏览器会自动根据 aspect-ratio 和容器大小调整内部元素的实际尺寸，从而实现预期的效果。 请注意将 "图片地址" 替换为实际图片的地址。

通过这种方式，我们仅使用 css 就实现了内部元素宽高比固定且居中缩放的需求，避免了使用 javascript 的复杂性。 此方法简洁高效，适用于各种需要保持宽高比且居中显示的场景。

到这里，我们也就讲完了《纯CSS技巧：实现内部元素固定宽高比并居中缩放》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！