Search code examples
cssimageresponsive-designshrinkwrap

How to make shrinkwrap work with responsive images?

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?

Solution

  • I don't quite understand; is this what you need?

    http://jsfiddle.net/JtEuC/

    All you need is the following code: 

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

    And the .shrinkwrap div is always the size of the image.