HTML 和 CSS 中具有固定大小的图像旁边的响应式文本输入

Question

我正在开发一个网站。现在我正在美化我的网站。现在我在设计网站时遇到问题。

这是我想要实现的目标

正如您在突出显示的区域中看到的那样，div 中有一个图像和文本区域。我想让它响应。我的意思是，它会有最大宽度，当用户降低屏幕尺寸时，它会变小，但它有最小宽度。我的意思是父 div 不是固定大小。它将会改变。

但我总是希望他们能肩并肩。但图像始终具有固定大小。无论屏幕尺寸如何变化，它都不会改变。但只有文本输入字段会根据父级进行响应。这是我的代码：

这是我的 HTML

  <div>
    <div class="comment-form">
         <img class="comment-avatar" src="/Images/user_avatar.png" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

这是我的 CSS

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
}

正如您在 css 中看到的，我将评论表单响应式设置宽度设置为 100%，并使用 min-width 和 max-width。头像图像将具有固定大小。问题是设置文本区域的宽度。我总是希望图像和文本区域并排。我希望文本区域占据表单区域的其余部分。所以我用百分比设置它的宽度。如您所见，现在宽度为 86%。如果我将其设置为 100%，形式将如下所示。

但使用当前的代码，我得到的就像第一张图片。但是当我调整屏幕大小时，它就变成了这样。

他们不再肩并肩了。所以我当前的代码没有响应。我想要做的是我希望图像始终固定一侧，并且希望文本区域占据表单容器的其余或剩余区域，无论屏幕尺寸更改为什么。

Answer 1

也许，这有帮助...我刚刚添加box-sizing并用于calc计算文本区域的宽度

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    box-sizing: border-box
}

.comment-avatar{
    width:60px;
    height:54px;
    display: inline-block;
    border:1px solid #CFD8DC;
    box-sizing: border-box;

}

.comment-textarea{

    width: calc( 100% - 70px);
    display:inline-block;
    border-radius:0px;
    height:54px;
    display: inline-block;
    box-sizing: border-box;

}

<div>
    <div class="comment-form">
         <img class="comment-avatar" src="https://upload.wikimedia.org/wikipedia/en/7/71/SmallTownSouthernMan.jpg" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>