纯CSS实现响应式两栏布局 右栏图片适配左栏高度且不超视口宽40%

完全可以通过纯CSS实现该需求，不需要额外JS逻辑，实现方案如下：

实现思路 #

• 桌面端使用flex横向布局，通过order属性调整元素展示顺序，满足「HTML结构右栏在前、展示时左文本右图」的要求
• 利用flex布局的等高特性，让图片容器高度自动匹配左侧文本列的高度
• 图片通过object-fit控制缩放，避免变形，同时限制最大宽度为视口的40%
• 移动端断点切换为纵向flex布局，自动保留HTML的元素顺序，实现图片在文本上方的展示效果

完整可直接使用的CSS代码 #

.my_list_item_container {
    clear: both;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    /* 新增：默认flex布局 */
    display: flex;
    gap: 1rem; /* 两栏间距可根据需求调整 */
}

.my_list_item_left_column {
    /* 新增：调整顺序到左侧 */
    order: 1;
    /* 新增：占满剩余宽度 */
    flex: 1;
    margin-top: 1rem;
}

.my_list_item_right_column {
    /* 新增：调整顺序到右侧 */
    order: 2;
    /* 新增：限制最大宽度为视口40% */
    max-width: 40vw;
    /* 禁止flex压缩图片列宽度 */
    flex-shrink: 0;
}

.my_list_item_right_column img {
    /* 图片高度和父容器一致，等于左侧文本高度 */
    height: 100%;
    width: auto;
    /* 控制图片缩放不变形，需要完整展示图片可替换为contain */
    object-fit: cover;
    max-width: 100%;
}

/* 移动端断点，阈值可根据实际需求调整 */
@media (max-width: 768px) {
    .my_list_item_container {
        flex-direction: column;
    }
    .my_list_item_left_column, .my_list_item_right_column {
        /* 移动端恢复默认顺序，图片在上文本在下 */
        order: unset;
        max-width: 100%;
    }
    .my_list_item_right_column img {
        width: 100%;
        height: auto;
    }
}

说明 #

你可以删除原来的.my_list_item_container_flex类，也不需要再保留JS的resize监听逻辑，当前方案完全符合你的所有要求：

1. 没有使用任何固定像素值，所有尺寸都是相对单位
2. 桌面端图片高度完全由左侧文本高度决定，不会超出文本高度
3. 移动端自动展示为图片在上、文本在下，符合HTML结构顺序要求

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