如何在图片左下角放置文本并适配屏幕缩放？附代码检查请求

要让文本牢牢钉在图片左下角，缩放时位置不变，你的核心思路是对的——用相对定位的父容器配合绝对定位的遮罩层，但现有代码有几处小问题需要调整，下面是具体修改方案：

现有代码的问题 #

1. span里的float:属性没有赋值，属于无效代码；
2. 用float控制文本位置不如用定位或flex布局可靠，缩放时容易错位；
3. img设置height: 100%可能导致图片拉伸变形，应该保持比例。

修改后的完整代码 #

CSS部分 #

.flex{
  position: relative;
  display: flex;
  justify-content: space-evenly;
}
.container-one {
  position: relative; /* 将相对定位移到容器，让遮罩层以它为参考 */
}
.container-one a {
  display: block; /* 让a标签占满容器，扩大点击区域 */
}
img{
  display: block;
  width: 100%;
  height: auto; /* 自动保持图片比例，避免缩放变形 */
}
.box-one{
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: 0.5s ease;
  display: flex; /* 用flex快速定位文本 */
  align-items: flex-end; /* 垂直方向靠下 */
  justify-content: flex-start; /* 水平方向靠左 */
  padding: 10px; /* 给文本留边距，不贴图片边缘 */
  box-sizing: border-box; /* 确保padding不超出容器尺寸 */
}
.container-one:hover .box-one {
   opacity: 1;
}
span{
  color: red;
  text-decoration: none;
}

HTML部分（结构无需大改） #

<div class="flex">
  <div class="container-one">
    <a href="#dog">
      <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
      <div class="box-one">
        <span>dog</span>
      </div>
    </a>
  </div>
  <div class="container-two"></div>
</div>

关键修改说明 #

• 把相对定位放在container-one上，让绝对定位的box-one始终以图片容器为参考，缩放时不会跑偏；
• img用height: auto保证图片缩放时比例不变，避免拉伸变形；
• 用flex布局的align-items: flex-end和justify-content: flex-start直接把文本固定在左下角，比float更稳定；
• 添加box-sizing: border-box确保遮罩层的padding不会让它超出图片容器，保证视觉一致性。

内容的提问来源于stack exchange，提问作者Krisztián Pócs