一、基本概念

二、实现步骤

1. HTML结构

<div class="image-container">
    <img src="your-image.jpg" alt="描述">
</div>

2. CSS样式

.image-container {
    position: relative; /* 设置相对定位 */
    width: 300px; /* 容器宽度 */
    height: 200px; /* 容器高度 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

.image-container img {
    position: absolute; /* 设置绝对定位 */
    bottom: 0; /* 定位到容器底部 */
    left: 0; /* 定位到容器左侧 */
    width: 100%; /* 图片宽度 */
    height: auto; /* 图片高度自适应 */
}

3. 解释

  • .image-container设置了相对定位，为内部元素的绝对定位提供参照。
  • 图片元素设置了绝对定位，bottom: 0和left: 0使其定位到容器的左下角。
  • width: 100%确保图片宽度填满容器宽度，height: auto保持图片原始宽高比。

三、示例效果

以下是上述代码的示例效果：

四、总结

希望这篇文章能帮助您提升网页设计水平，使您的作品更具吸引力。