Question

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

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

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

将图像包装成div但保持纵横比

2 个答案: