开发者社区> 问答> 正文

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

demo是酱的:

dom:

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


css:

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

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

我的效果是酱的:
screenshot

展开
收起
杨冬芳 2016-06-06 13:21:33 3163 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    div {
        width: 80px;
        height: 80px;
        background-image: url('test.jpg');
        background-position: center center;
        background-size: cover;
    }
    2019-07-17 19:28:19
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载