将图像包装到 div 中但保持纵横比答案

【问题标题】：wrap image into div yet maintain aspect ratio将图像包装到 div 中但保持纵横比
【发布时间】：2014-02-10 10:35:45
【问题描述】：

图像流出 div，我希望它适合包装，因为我已将宽度设置为 div 包装。图像的大小可能并不相同，所以我没有将 img 设置为某个固定宽度以保持其纵横比。

profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
}
img {
    width:100%;
}

【问题讨论】：

标签： html css

【解决方案1】：

您将. 留在了课堂之外。但是事件（http://fiddle.jshell.net/293mW/1/）图像会从 div 中弹出。您可以将 overflow:hidden; 添加到 div 中，但这会裁剪图像 (http://fiddle.jshell.net/pzDVd/)。

您可能希望使用背景图片和background-size: cover; 或background-size: contain; 规则。另见https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

jsFiddle example（或http://fiddle.jshell.net/Fhnk8/）

.profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
    background-image: url(http://naijaparrot.com/wp-content/uploads/2013/10/mark-zuckerberg-le-fondateur-de-facebook.jpg);
    background-size: cover;
}

【讨论】：

使用溢出隐藏似乎可以解决问题，结果与使用背景img相同..为什么？
我假设您指的是background-size: cover;（不包含），这只是因为封面将缩放它以适应“同时确保其尺寸大于或等于相应尺寸背景定位区域”。而且背景图片不能从它们的容器中弹出。

【解决方案2】：

这是解决您的问题的正确代码。这将在保持正确的纵横比的同时将任何图像调整到容器中。

此外，您应该尽量避免使用background-size: cover，因为旧浏览器的浏览器支持很差。

http://fiddle.jshell.net/293mW/4/

.profile-pic-wrap {
    width:200px;
    height:200px;
    border: 5px solid black;
}
img {
    width:100%;
    max-width: 100%
    height: auto;
}

【讨论】：