使用display:flex时，如何让图片适配输入框所在Div的高度？

问题描述 #

现有如下HTML结构：

<div class="container">
  <div class="flag">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/800px-Flag_of_the_United_States.svg.png">
  </div>
  <div class="input">
    <input type="text">  
  </div>
</div>

对应的CSS样式：

* { 
    padding: 0;
    margin: 0;
}

.container  {
    display: flex;
    padding : 10px;
    background-color: lightgray;
    width: 100vw;
}

.flag>img { 
    height: 100%;
    object-fit: cover;
}

.input>input {
    font-size: 50px;    
}

需求是让图片高度自动适配输入框的高度，但尝试height:100%、object-fit:contain、object-fit:cover等方法均无效。

解决方案 #

问题根源在于：flex容器的高度由输入框撑开，但图片容器.flag没有明确的高度约束，导致img的height:100%无法继承到输入框的高度。只需修改CSS，让.flag的高度与flex容器一致，同时确保图片能占满容器高度：

修改后的完整CSS：

* { 
    padding: 0;
    margin: 0;
}

.container  {
    display: flex;
    padding : 10px;
    background-color: lightgray;
    width: 100vw;
    /* 保持默认的align-items: stretch，让子项高度与容器一致 */
}

.flag {
    height: 100%; /* 让图片容器占满flex容器的高度，该高度由输入框撑开 */
    margin-right: 10px; /* 可选：给图片和输入框之间加间距 */
}

.flag>img { 
    height: 100%;
    object-fit: contain; /* 用contain保证图片完整显示，若需要填充容器可用cover */
}

.input>input {
    font-size: 50px;    
}

关键说明 #

• .flag设置height:100%后，会继承flex容器的高度（flex容器高度由输入框的字体大小撑开）。
• img的height:100%此时会参考.flag的高度，从而实现与输入框高度一致。
• object-fit:contain确保图片完整显示，不会被裁剪；若需要图片填充整个容器可改用object-fit:cover。

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