如何让Div适配父容器并保持宽高比且无裁切？

嘿，完全可以用纯CSS搞定这个需求！不用局限于img标签的object-fit属性，我们可以利用现代CSS特性或者布局技巧，让你的固定宽高比div在容器里尽可能占满空间，同时保持比例不被裁切，效果和object-fit: contain一模一样。

推荐方案：使用aspect-ratio（现代浏览器首选） #

现在主流浏览器都原生支持aspect-ratio属性，它比传统的padding hack更直观易维护。下面是完整的实现代码：

CSS代码 #

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  /* 让body成为flex容器，实现全局居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  height: 100%;
  /* 容器用flex布局，确保内部元素能自适应并居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 可选，避免元素贴容器边缘 */
  box-sizing: border-box;
}

.embed {
  /* 定义目标宽高比，比如1:1写1/1，4:3写4/3 */
  aspect-ratio: 1/1;
  /* 限制最大尺寸，确保不超出容器边界 */
  max-width: 100%;
  max-height: 100%;
  /* 让元素在容器内自动居中 */
  margin: auto;
  /* 可视化样式，方便查看效果 */
  background-color: red;
  padding: 1rem;
  box-sizing: border-box;
}

HTML代码 #

<div class="container">
  <div class="embed">
    这个div会自适应容器空间，保持宽高比，不会被裁切
  </div>
</div>

方案核心逻辑 #

• aspect-ratio：直接给目标元素定义固定宽高比，替代了传统的padding hack，代码更简洁易懂。
• max-width: 100% + max-height: 100%：当容器宽高比与元素不一致时，元素会自动缩小到能完整容纳的最大尺寸，避免裁切。
• Flex布局 + margin: auto：让元素在容器的垂直、水平方向都居中，完美模拟object-fit: contain的居中效果。

兼容旧浏览器的方案（基于padding hack） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以结合传统的padding hack和同样的布局逻辑：

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.aspect-wrapper {
  /* 用padding-top实现1:1宽高比，数值=高度/宽度*100% */
  padding-top: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  position: relative;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  padding: 1rem;
  box-sizing: border-box;
}

<div class="container">
  <div class="aspect-wrapper">
    <div class="embed">
      兼容旧浏览器版本，同样保持宽高比不裁切
    </div>
  </div>
</div>

这个方案通过aspect-wrapper的padding-top维持宽高比，再结合容器的flex布局让wrapper自适应空间，达到和现代方案一致的效果。

内容的提问来源于stack exchange，提问作者haxpanel