纯CSS无表达式实现图片等比缩放（转载）

最新推荐文章于 2025-08-02 17:52:25 发布

转载最新推荐文章于 2025-08-02 17:52:25 发布 · 431 阅读

文章标签：

#css #img #图片缩放

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS为图片创建固定尺寸容器的方法，并详细解释了如何使图片在该容器中自适应显示，同时保持原始比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    .box{
        width: 300px;
        height: 300px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .box img{
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
</style>

.box 是图片标签外的 div 标签
img 是 div 内的图片标签