调整图片大小以使其适合其容器

时间:2016-02-11 17:52:00

标签: html css

我有一个div profile_pic,它有以下CSS:

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

由于我的应用程序的个人资料图片可以是任何图像(任何大小),div或图像应该是灵活的以适应彼此。我测试了尺寸为300px width300px height的个人资料图片,图片在div中完美呈现。但是,当我上传带有550px width400px width的图片时,图片正在显示"压扁"这是可以理解的。

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

我试过设置:

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

但它不起作用。如何让div(或图像)始终符合div的大小,而不会丢失图像的质量?

2 个答案:

答案 0 :(得分:1)

您可以将background-size:contain;添加到包含图像的div(假设您正在为背景图像设置所需的图像。

质量下降是另一回事,缩放说50x50px图像到100x100会失去质量,所以最好设置个人资料图片的最小尺寸。

答案 1 :(得分:0)

您可以设置max-widthmax-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>