图片超出容器大小时显示居中部分

最新推荐文章于 2022-05-07 15:34:54 发布

siriva

最新推荐文章于 2022-05-07 15:34:54 发布

阅读量760

点赞数

文章标签： css 图片居中显示

本文链接：https://blog.csdn.net/rosemarryTop/article/details/117811637

版权

html代码：

<div class="lpic">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.dllp.cn%2FFileUpload%2FPremises%2F20170323%2F7161f8919e5c40fd82a6f4cb7a97adaa.jpg&refer=http%3A%2F%2Fwww.dllp.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpegsec=1625975520&t=cc105a439bbcdcc3a83fa9df87e147a8">
</div>

css代码：

.lpic {
    width: 100px;
    max-height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lpic img {
    width: 100%;
}