我有一个div profile_pic
,它有以下CSS:
#profile_pic{
position:absolute;
border:1px solid #E1E3E4;
left:25px;
top: 25px;
width: 200px;
height: 200px;
}
由于我的应用程序的个人资料图片可以是任何图像(任何大小),div或图像应该是灵活的以适应彼此。我测试了尺寸为300px width
和300px height
的个人资料图片,图片在div中完美呈现。但是,当我上传带有550px width
和400px width
的图片时,图片正在显示"压扁"这是可以理解的。
有两个选项,1。调整图像大小以使整个图像显示在div中2.裁剪图像以使图像适应div大小。我不介意采用这些方法中的任何一种,但我无法在代码中实现这些方法。
我试过设置:
#profile_pic {width: 50%}
#profile_pic img {width:100%}
但它不起作用。如何让div(或图像)始终符合div的大小,而不会丢失图像的质量?
答案 0 :(得分:1)
您可以将background-size:contain;
添加到包含图像的div(假设您正在为背景图像设置所需的图像。
质量下降是另一回事,缩放说50x50px图像到100x100会失去质量,所以最好设置个人资料图片的最小尺寸。
答案 1 :(得分:0)
您可以设置max-width
和max-height
以便调整图像大小以适应框内而不会溢出,添加行高和文本对齐到中心图像,以防它具有相同的框比率。
#profile_pic,
.profile_pic2 {
position: absolute;
border: 1px solid #E1E3E4;
left: 25px;
top: 25px;
width: 200px;
height: 200px;
line-height: 197px;
/* since image is the one and single child */
text-align: center;
border: solid;
/*demo purpose */
}
.profile_pic2 {
left: 250px;
}
.profile_pic2 +.profile_pic2 {
left: 450px;
}
#profile_pic img, .profile_pic2 img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
/* set on middle baseline setted at 200px */
}
<div id="profile_pic">
<img src="//lorempixel.com/640/480">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/640">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/480">
</div>