如何实现空div默认最小宽度400px，有内容时自适应内容宽度

原代码失效的核心原因是min-width: 400px会给div强制设置宽度下限，无论内部内容尺寸多小，div宽度都不会低于400px，无法满足小图场景下自动收缩的需求。

以下两种方案都可以纯HTML+CSS实现需求，可根据浏览器兼容要求选择。

方案1：全兼容方案（支持所有现代浏览器、IE9+） #

利用:empty伪类仅为空状态的div设置最小宽度，非空状态让div自动适配内容宽度，兼容性最好。

<div class="img-wrap"></div>
<!-- 插入图片时直接往div内加img标签即可 -->
<!-- <div class="img-wrap"><img src="test.png" alt="示例图片"></div> -->

.img-wrap {
  width: -moz-fit-content;
  width: fit-content;
  height: 200px;
}
/* 仅空div生效最小宽度 */
.img-wrap:empty {
  min-width: 400px;
}
.img-wrap img {
  height: 100%;
  max-width: 100%;
  display: block;
}

规则匹配说明 #

• div为空时：:empty选择器命中，div最小宽度保持400px
• div内插入宽度<400px的图片时：div非空，无强制最小宽度限制，fit-content会让div宽度自动收缩到和图片一致
• div内插入宽度>400px的图片时：div随图片宽度自动撑开，max-width:100%会保证图片不会溢出外层约束

注意：:empty只会匹配完全没有子节点、没有任何文本（包括空格、换行）的元素，空div请直接写成<div class="img-wrap"></div>，不要在标签内部留空白内容，否则会导致选择器失效。

方案2：现代浏览器简洁方案（Chrome 118+/Firefox 120+/Safari 17.2+） #

使用CSS原生min-intrinsic-width属性，直接定义元素无内容时的最小固有尺寸，不需要单独匹配空状态，代码更简洁，也不受空白节点影响：

.img-wrap {
  width: fit-content;
  min-intrinsic-width: 400px;
  height: 200px;
}
.img-wrap img {
  height: 100%;
  max-width: 100%;
  display: block;
}

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