css - 如何使 shrinkwrap 与响应式图像一起使用？

Question

我在 div 中有一张图片，我想使用以下方法将其收缩:

<div class="shrinkwrap">
   <img src="image.jpg">
</div>

.shrinkwrap {
    display: inline-block;
    border: 1px solid #FFF;
    padding: 10px;  
}

但是，当我这样做时，图像不再响应(我使用了 max-width: 100%)。如果我不在 div 上使用内联 block ，它是响应式的，但如果我删除它，那么我的 div 不会收缩环绕图像。

有什么解决方案可以让我的图像收缩包装但保持响应？

Answer 1

不太明白；这是你需要的吗？

http://jsfiddle.net/JtEuC/

您只需要以下代码:

.shrinkwrap img {
    display: block;
    max-width: 100%;
}

并且 .shrinkwrap div 始终是图像的大小。