如何让响应式卡片的图片栏与内容栏高度一致？

效果展示 #

问题描述 #

上方图片为媒体查询触发时的效果，下方图片为分辨率放大后的效果。分辨率变宽时，图片会填充其容器。请问如何在媒体查询触发时让图片完全拉伸至左侧卡片内容的高度？

现有CSS代码 #

@media (min-width:700px) {
    .card {
        grid-template-columns: 1fr 1fr;
    }
    .card-image {
        order: 2;
    }
    .card-content {
        order: 1;
        text-align: left;
    }
    .flex-group {
        flex-direction: row;
    }
}

解决方案 #

只需对现有CSS做以下调整，即可让图片完全匹配左侧卡片内容的高度：

@media (min-width:700px) {
    .card {
        grid-template-columns: 1fr 1fr;
        /* 确保网格行高度由最高内容项决定，所有网格项自动拉伸 */
        align-items: stretch;
    }
    .card-image {
        order: 2;
        /* 让图片容器占满网格项的全部高度 */
        height: 100%;
        display: flex;
    }
    .card-image img {
        width: 100%;
        height: 100%;
        /* 保持图片比例并填满容器，避免变形；如需强制拉伸用object-fit: fill */
        object-fit: cover;
    }
    .card-content {
        order: 1;
        text-align: left;
    }
    .flex-group {
        flex-direction: row;
    }
}

关键说明：

1. align-items: stretch是网格容器的默认属性，显式声明可确保所有网格项高度统一，由左侧card-content的高度决定。
2. 给.card-image设置height: 100%和display: flex，让图片能完全填充容器空间。
3. object-fit: cover会保留图片比例，裁剪超出部分；如果不需要保持比例，替换为object-fit: fill即可让图片完全拉伸适配容器尺寸。

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