求助：实现右侧图片底部锚定及响应式布局需求

要实现你需要的布局效果，推荐使用Flexbox布局替代浮动，它能更轻松地控制元素的垂直对齐和响应式调整。以下是修改后的完整代码：

HTML结构（无需改动） #

<div class="landing">
    <div class="introcopy"> 
        <br>
        <h1>Header</h1>
        <br>
        <p>Welcome to my portfolio...</p>
        <br>
        <br>
    </div>
    <div class="landingimage"> 
        <img src="img/pink.png" alt="Portfolio image">
    </div>
</div>

修改后的CSS代码 #

/* 全局盒模型统一，避免padding撑大容器 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.landing {
    min-height: 90vh; /* 使用vh确保高度基于视口 */
    background-color: #a2c2d4;
    padding: 2% 4%;
    display: flex; /* 启用Flex布局 */
    align-items: flex-end; /* 子元素底部对齐 */
    gap: 2%; /* 文本和图片之间的间距，替代padding-right */
}

.introcopy {
    text-align: left;
    padding-top: 10%;
    max-width: 70%;
}

.landingimage {
    width: 30%;
    display: flex;
    align-items: flex-end; /* 确保图片容器内部元素底部对齐 */
}

.landingimage img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 保持图片比例，填充容器且不裁剪 */
    max-height: 100%; /* 限制图片高度不超出容器 */
}

/* 移动端响应式调整 */
@media (max-width: 600px) {
    .landing {
        flex-direction: column; /* 切换为垂直排列 */
        align-items: flex-start;
    }
    .introcopy {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 20px; /* 文本和图片之间的间距 */
    }
    .landingimage {
        width: 100%;
    }
    .landingimage img {
        max-height: 25vh; /* 限制图片最大高度为视口的25% */
    }
}

关键修改说明 #

• Flex布局：通过display: flex和align-items: flex-end直接实现文本与图片的底部对齐，解决浮动布局无法精准控制垂直位置的问题。
• object-fit: contain：确保图片保持原始比例，填充右侧容器的同时不会被裁剪，避免出现溢出或悬浮的情况。
• 响应式调整：媒体查询中切换Flex方向为垂直排列，同时设置图片的最大高度为视口的25%，满足移动端需求。
• 盒模型统一：添加* {box-sizing: border-box;}避免padding和border撑大容器宽度，确保布局计算准确。

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