宽大于长的图片,img标签如何填充满显示? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

宽大于长的图片,img标签如何填充满显示?

杨冬芳 2016-06-06 13:21:33 1937

demo是酱的:

dom:

 <div>
    <img src="test.jpg" alt="" width="80">
</div>


css:

div {
    width: 80px;
    height: 80px;
    background-color: #000;
}

假设这个div是一个头像,高宽是固定的,对于这种宽大于长的图片 怎么良好的显示出来?

我的效果是酱的:
screenshot

前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:19

    图片放div的background里,自动填满并居中,不会改变拉申比例。

    div {
        width: 80px;
        height: 80px;
        background-image: url('test.jpg');
        background-position: center center;
        background-size: cover;
    }
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程