如何让图片在Div底部对齐并保持响应式？

现有代码的问题 #

• .container 设置固定 height:600px，无法适配不同屏幕高度，导致响应式失效
• .tag 同时使用 float:left 和 position:absolute，属性冲突（absolute定位下float无效）
• 图片未限制尺寸，会超出容器范围破坏布局

修正后的实现方案 #

以下调整可实现符合响应式要求的底部对齐效果：

HTML 代码

<div style="height:350px;"></div>
<div class="container">
       <img class="tag" src="http://www.placehold.it/800x800">
       <h1>Title</h1>
</div>

CSS 代码

.container {
       border: 1px solid #DDDDDD;
       background-color: #789456;
       max-width: 1920px;
       /* 用min-height替代固定height，保证最小高度同时支持自适应 */
       min-height: 600px;
       position: relative;
       margin:auto;
       border-radius: 35px;
       /* 添加内边距避免内容贴边 */
       padding: 0 1rem 1rem;
       box-sizing: border-box;
    }
    
.tag {
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   /* 限制图片最大宽度，避免超出容器 */
   max-width: calc(100% - 2rem);
   height: auto;
}

h1 {
  position:absolute;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  color: #fff;
}

关键改动说明 #

• 容器改用 min-height:600px，确保小屏幕下不会被内容撑爆，同时支持高度自适应
• 移除 .tag 的 float:left，消除属性冲突
• 给图片添加 max-width: calc(100% - 2rem)，保证任何屏幕下图片都不会超出容器内边距范围，height:auto 维持图片比例
• 给容器和绝对定位元素设置统一内边距，避免内容紧贴容器边缘，优化响应式视觉效果
• 清除h1默认margin，避免布局偏移

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