如何使用响应式图像进行收缩包装？

Question

我在div中有一个图像，我想通过使用：

来收缩它

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

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

然而，当我这样做时，图像不再响应（我使用max-width: 100%）。如果我不在div上使用内联块，但是如果我将其删除，那么它会响应，那么我的div不会缩小图像周围。

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

Answer 1

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

http://jsfiddle.net/JtEuC/

您只需要以下代码：

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

.shrinkwrap div总是图像的大小。