Question

我有一个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的图片时，图片正在显示＆＃34;压扁＆＃34;这是可以理解的。

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

我试过设置：

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

但它不起作用。如何让div（或图像）始终符合div的大小，而不会丢失图像的质量？

Answer 1

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

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

Answer 2

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

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

2 个答案: