调整图像大小，使其在它适合的容器

我有具有以下CSS一个div profile_pic：调整图像大小，使其在它适合的容器

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

由于我的应用程序可以是任何图像（任意大小的）资料图片，股利或形象，应该灵活适应对方。我已经测试了尺寸为300px width和300px height的个人资料图片，并且图像在div中完美呈现。然而，当我上传一张图片说，550px width和400px width图像显示“压扁”，这是可以理解的。

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

我试图设置：

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

但它是行不通的。如何让div（或图像）始终适合div的大小，而不会丢失图像的质量？

来源

2016-02-11 Freddy

如果你只是把'最大宽度：100％;最大高度：100％;'没有宽度或高度为 – SmokeyPHP

你能澄清HTML布局 - 有一个div与'img'里面还是你设置div的'background-image'属性？ – RamRaider

你可以只添加background-size:contain;到具有图像股利（假设你设置的背景图像所需的图像。

失去质量是另一回事，缩放说50x50px图像为100x100要输质量，所以它很可能是最好设置一个最小尺寸的资料图片即可。

来源

2016-02-11 18:07:50 WelshBoyZz

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

来源

2016-02-11 18:59:28

调整图像大小，使其在它适合的容器

回答

相关问题