CSS图片在div居中显示,多出部分隐藏

首先写个div和img

<pre data-language="HTML">```markup
<div class="post-thumbnail">
    <img src="https://cdn.kaygb.top/wp-content/uploads/2019/08/qrcode_for_gh_b81da5d60ae4_1280.jpg" />
</div>

``` 这里采用相对定位和绝对定位的方式隐藏多余部分

.post-thumbnail{
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.post-thumbnail img{
    width: 100%;
    height: auto;
    position: absolute;
}

原图

加上css之后的图片

#

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×