html - 将图像包装到 div 中但保持纵横比

Question

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

demo link

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

Answer 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;
}