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

demo是酱的:

dom:

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

css:

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

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

我的效果是酱的:

clipboard.png

阅读 10k
3 个回答

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

div {
    width: 80px;
    height: 80px;
    background-image: url('test.jpg');
    background-position: center center;
    background-size: cover;
}

在不拉伸图片的情况下应该没有什么好的办法,如果是用户上传,你可以在上传时添加尺寸比例限制,以防出现这种情况

1楼的办法应该能实现,当做背景图片。用户上传的时候可以用程序截取图片大小,不然太大的图片上传速度慢也占用多余的空间

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题