我有一个 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 的大小而不损失其质量?
最佳答案
您可以将 background-size:contain;
添加到包含图像的 div 中(假设您将背景图像设置为您想要的图像。
降低质量是另一回事,将 50x50 像素的图像缩放到 100x100 会降低质量,因此最好设置个人资料图片的最小尺寸。
关于html - 调整图像大小,使其适合容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35346560/