仅用HTML与CSS如何实现无src固定宽img初始指定高度、加载后自动适配？

可以仅通过HTML+CSS实现该需求，核心逻辑是利用CSS属性选择器匹配img无src的初始状态

实现原理 #

img元素在未赋值src属性时，可通过:not([src])伪类精准匹配该状态，单独为其设置固定初始高度；有src属性时默认匹配height: auto的规则即可，无需JS介入样式切换。

完整示例代码 #

<style>
  .preview-img {
    /* 通用样式 */
    width: 300px; /* 固定宽度可自定义 */
    border: 2px solid #000;
    height: auto; /* 有src时高度自适应 */
    display: block; /* 消除行内元素基线偏移问题 */
  }
  /* 匹配无src的初始状态 */
  .preview-img:not([src]) {
    height: 200px; /* 此处数值可自定义为任意初始高度 */
    /* 可选：初始状态添加占位背景 */
    background-color: #f5f5f5;
  }
</style>

<!-- 业务标签 -->
<input type="file" accept="image/*" onchange="document.querySelector('.preview-img').src = URL.createObjectURL(this.files[0])">
<img class="preview-img" alt="图片预览">

适配说明 #

• 如果你的img初始设置的是空src属性（<img src="">而非完全省略src），将初始状态的选择器改为.preview-img[src=""]即可
• 可直接调整:not([src])选择器内的height值自定义不同初始高度，不影响加载图片后的自适应逻辑

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