CODEWITHSUNDEEP
htmlcss
andreas k
andreas k

Reputation: 136

Shrink wrap a "max-sized" image

Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).

I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.

Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)

Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.

Upvotes: 2

Views: 315

Answers (2)

Wex
Wex

Reputation: 15705

Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/

You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).

Upvotes: 0

xmarcos
xmarcos

Reputation: 3368

Try this one, http://jsfiddle.net/xmarcos/K4dHr/

Update: http://jsfiddle.net/xmarcos/K4dHr/4/

Upvotes: 1

Related Questions