如何使收缩包装与响应式图像一起使用？

Question

我在一个 div 中有一个图像，我想使用以下方法对其进行收缩包装：

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

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

但是，当我这样做时，图像不再响应（我使用了max-width: 100%）。如果我不使用 div 上的 inline-block 它是响应式的，但如果我删除它，那么我的 div 不会缩小图像周围的环绕。

任何解决方案，以便我可以缩小图像但保持响应？

Answer 1

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

http://jsfiddle.net/JtEuC/

您只需要以下代码：

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

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