Shopify站点如何实现图片与文本同尺寸响应式缩放

现有代码存在三个样式缺失，直接导致图片溢出、和相邻文本尺寸不匹配：

• 未对.is-image图片标签设置尺寸约束，图片会按原生分辨率渲染，直接撑破父容器边界
• 容器默认使用content-box盒模型，设置的width: 50%未计入3rem内边距，两个并列容器实际占宽总和超过100%，挤压整体布局
• 父级flex容器未设置交叉轴对齐规则，图片块和相邻文本块无法自动保持高度一致

直接替换原有CSS代码即可，不需要调整Liquid模板结构：

/* 合并两个布局容器的公共样式，减少冗余代码 */
.bulky-img-section,
.bulky-img-section-right {
    display: flex;
    width: 100%;
    /* 让并排的图片块、文本块高度自动匹配 */
    align-items: stretch;
}

.bulky-img-section {
    flex-direction: row;
}

.bulky-img-section-right {
    flex-direction: row-reverse;
}

.image-sub-section {
    width: 50%;
    padding: 3rem;
    /* 内边距计入容器总宽度，避免两个50%宽度容器溢出换行 */
    box-sizing: border-box;
    /* 图片在容器内垂直居中 */
    display: flex;
    align-items: center;
}

/* 核心响应式图片规则 */
.is-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* 保持图片原始比例，避免拉伸变形 */
    object-fit: contain;
    display: block;
}

• 移动端适配：如果需要小屏幕下图文自动上下堆叠，追加以下媒体查询规则：

@media screen and (max-width: 750px) {
    .bulky-img-section,
    .bulky-img-section-right {
        flex-direction: column;
    }
    .image-sub-section {
        width: 100%;
        padding: 1.5rem;
    }
}

• 加载速度优化：Liquid模板中img_url:'master'会加载原始尺寸的超大图，建议替换为和容器实际宽度匹配的尺寸参数，比如{{section.settings.image-link | img_url: '1200x'}}，可大幅降低图片体积，提升页面加载速度。

修复后图片会自动撑满父容器可用宽度，高度按原始比例自动缩放，不会出现溢出问题；图文两个并排区块宽度严格各占50%，高度自动对齐，不会再出现图片尺寸大于文本块的显示异常。

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