html img 截取展示

最新推荐文章于 2025-06-22 10:55:34 发布

torpidcat

最新推荐文章于 2025-06-22 10:55:34 发布

阅读量7.4k

点赞数

分类专栏： web

web 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的图片展示样式，通过定义特定的类来控制图片的大小和位置，适用于网页设计中的图片展示需求。

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

<style>
    /* 图片截取展示 */
    .img-responsive{
        max-width: 100%;
        height: 0;
        padding-bottom: 40%;
        background-color:#fef9ff;/*背景色*/
        overflow: hidden;
    }
    .img-responsive img {
        width: 100%;
    }
</style>

<div class="img-responsive">
    <img src="http://www.hishop.com.cn/uploads/150914/21678-150914112244436.jpg"
    />
</div>

前：