javascript - 宽大于长的图片，img标签如何填充满显示？

Question

demo是酱的:

dom:

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

css:

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

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

我的效果是酱的:

Answer 1

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

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

Answer 2

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

Answer 3

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