如何用CSS calc实现div取父元素40%宽与100%高中的较小值？

完全不需要使用JavaScript，用CSS就能实现这个需求——calc()无法直接取两个值中的较小值，但CSS原生的min()函数可以，配合容器查询还能精准基于父元素的尺寸计算。

实现步骤： #

1. 给父元素添加容器类型声明，让它成为尺寸上下文：

.parent-container {
  container-type: size;
}

2. 给目标<div>设置样式，用min()取父元素宽度40%和父元素高度100%的较小值作为宽度：

.bg-div {
  /* 100cqh 代表父容器高度的100%，40% 代表父容器宽度的40% */
  width: min(40%, 100cqh);
  /* 如果需要高度占满父元素高度，添加下面一行 */
  height: 100%;
  /* 背景图适配样式 */
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
}

如果你的项目不需要兼容旧浏览器（容器查询目前已被现代浏览器广泛支持），这就是最简洁的纯CSS方案。如果必须兼容不支持容器查询的环境，也可以用min(40vw, 100vh)替代（基于视口尺寸而非父元素），或者用max-width:40%; max-height:100%; width:auto; height:auto让元素自适应缩放至符合限制的尺寸。

calc()只能执行加减乘除运算，无法实现取最小值的逻辑，所以不适合这个场景。

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