如何用CSS实现窗口尺寸变化时图片的动态响应式缩放？

要解决窗口缩小后图片保持横向同比缩放的问题，你可以通过Flexbox布局+媒体查询实现，具体方案如下：

修改后的完整代码 #

HTML（修正类名拼写错误，不影响功能也可保留原拼写） #

<body>
    <div class="h1">
        <h1>Responsive Cards</h1>
    </div>
    <div class="card-container">
        <div class="card">
            <img src="https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg">
        </div>
        <div class="card">
            <img src="https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg">
        </div>
        <div class="card">
            <img src="https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg">
        </div>
    </div>
</body>

CSS #

/* 基础布局：卡片默认横向排列，保留间距 */
.card-container {
    display: flex;
    gap: 1rem; /* 卡片间的间距 */
    padding: 0 1rem;
    flex-wrap: wrap; /* 窗口过大时允许换行，可根据需求调整 */
}

.card {
    flex: 0 0 auto; /* 默认不缩放，保持原始宽度 */
}

.card img {
    width: 100%; /* 图片自适应卡片宽度 */
    height: auto; /* 保持图片比例，避免变形 */
}

/* 媒体查询：窗口宽度小于768px时触发缩放逻辑 */
@media (max-width: 768px) {
    .card-container {
        flex-wrap: nowrap; /* 强制卡片不换行，保持横向排列 */
    }

    .card {
        flex: 1; /* 三张卡片平分容器宽度，实现同比缩放 */
    }
}

核心逻辑说明 #

• 基础布局：用flex让卡片横向排列，图片设置width:100%确保能跟随卡片尺寸变化。
• 媒体查询断点：设定你需要的窗口阈值（示例为768px），当窗口小于该值时：
  • 给容器设置flex-wrap: nowrap，强制卡片不换行。
  • 给卡片设置flex:1，让三张卡片自动平分容器宽度，实现同比缩放。
• 图片的height:auto保证缩放时始终保持原始比例，不会变形。

你可以根据需求调整媒体查询的阈值（比如改成600px），或者调整gap、padding等参数优化布局效果。

内容的提问来源于stack exchange，提问作者Learn-code