Adjusting parent element of css-transformed image to fit. (Twitter Bootstrap)

Question

I am currently using Twitter Bootstrap on a new project. The main part of the project is a thumbnail gallery, exactly like the one they have in their examples (here: http://twitter.github.com/bootstrap/components.html#thumbnails).

Problem is I am currently css-transforming (rotating, basically) images when needed according with their EXIF orientation data. When I apply a transform (using -webkit-transform for now, as I am testing on Chrome) to an img, its parent element stays the same, and the image "overflows" its container.

Using Chrome, one can test this behavior going to the example thumbnail gallery I linked before, inspecting one of the placeholder images and adding a style="-webkit-transform: rotate(90deg) property to the img tag. Image overflows the li container element and breaks the layout.

Is there a way to solve this and have bootstrap treat a css-rotated image as if it were originally that way? I thought of manually setting height and width of the img tag, and their parents would adjust, but I can't know what size the image will be rendered on the server side, before they're actually rendered, so that seems to rule out this approach.

Oh, and by the way, I know I could resort to rotating on the server-side, I know it's not hard, I just would very much prefer to do it in the browser, if at all possible.

Any ideas?

Thanks!

EDIT: Jaap suggested I rotate the entire container, which would work perfectly if It wasn't for the fact that I have text nodes inside the thumbnail lis. Rotating the container will make the text show rotated as well.

Answer 1

For reference, the (new) CSS way of solving image rotation based on EXIF data is the image-orientation: from-image property.

From http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

These problems are all solved by the new CSS image-orientation property, which is now supported by Firefox 26. When the style image-orientation: from-image is applied to a JPEG image, the browser will take its EXIF orientation tag into account when performing layout and rendering. This means smartphone and digital camera images can now be displayed in their proper orientation natively by the browser, just by adding a single CSS property!

Here’s the first image in this article again, but this time with image-orientation applied. If you’re using Firefox 26, you’ll see this image rendered as it was intended, with the sky on top and the ground on the bottom.