将图像包装到div中，但保持长宽比

图像流出div，我期望它适合在包装内，因为我已将宽度设置为div包装。图像的尺寸可能不一样，所以我没有将img设置为某个固定宽度以保持宽高比。将图像包装到div中，但保持长宽比

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

来源

2014-01-21 user3189052

你离开.你的类。但事件与（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; 
}

来源

2014-01-21 02:17:25 j08691

利用溢出隐藏似乎做的伎俩，结果是使用背景IMG相同..为什么呢？ – user3189052

我假设你指的是'background-size：cover;'（不包含），这只是因为封面会缩放以适合“，同时确保其尺寸大于或等于背景的相应尺寸定位区域“。背景图片不能戳出它们的容器。 – j08691

下面是正确的代码来解决问题。这将调整任何图像到容器中，同时保持正确的宽高比。

此外，您应该尽量避免使用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; 
}

来源

2014-01-21 02:40:30

将图像包装到div中，但保持长宽比

回答

相关问题