css - How to make shrinkwrap work with responsive images?

Question

I have an image inside a div and I'd like to shrinkwrap that by using:

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

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

However, when I do it this way, the image is no longer responsive (I used max-width: 100%). It's responsive if I don't use the inline-block on the div but if I remove it, then my div doesn't shrink wrap around the image.

Any solution to this so that I can shrink wrap my image but keep it responsive?

Answer 1

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

http://jsfiddle.net/JtEuC/

您只需要以下代码：

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

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