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之后的图片

上一篇:

下一篇:

评论*

  1. 萧瑟说道:

    相对定位和绝对定位是个比较难懂的知识点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注