html - 调整图像大小，使其适合容器

Question

我有一个 div profile_pic，它具有以下 CSS:

#profile_pic{
    position:absolute;
    border:1px solid #E1E3E4;
    left:25px;
    top: 25px;
    width: 200px;
    height: 200px;  
}

由于我的应用程序的个人资料图片可以是任何图像(任何大小)，因此 div 或图像应该灵活地相互适应。我已经测试了尺寸为 300px 宽度 和 300px 高度 的个人资料图片，图像在 div 中完美呈现。但是，当我上传一张图片时，550px 宽度 和 400px 宽度 图像出现“压扁”，这是可以理解的。

有两个选项，1. 调整图像大小，使整个图像出现在 div 中；2. 裁剪图像，使图像适应 div 大小。我不介意采用这两种方法中的任何一种，但我无法在代码中实现这些方法。

我试过设置:

#profile_pic {width: 50%}
#profile_pic img {width:100%}

但这就是行不通。我怎样才能使 div(或图像)始终适合 div 的大小而不损失其质量？

Answer 1

您可以将 background-size:contain; 添加到包含图像的 div 中(假设您将背景图像设置为您想要的图像。

降低质量是另一回事，将 50x50 像素的图像缩放到 100x100 会降低质量，因此最好设置个人资料图片的最小尺寸。