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

Ok, in that case you should apply it like this:

<ul>
<li class="span3 cw rotated">
    <div class="thumbnail">
        <img src="http://placehold.it/200x180" alt="">
        <div class="caption">
            <h5>Thumbnail label</h5>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
        </div>
    </div>
</li>

.cw img{
  -webkit-transform: rotate(90deg);
  height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */
}
.ccw img{
  -webkit-transform: rotate(-90deg);
  height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */
}

​ Check out the fiddle: http://jsfiddle.net/dGgrG/4/

The only annoying bit is that max-width stuff in Bootstrap messes up your aspect ratio. This will happen when you'll be using the Bootstrap grid. You could overrule it throughout css, or javascript could might help you out.

To fix it with JS you should have a look at these 2 posts:

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

jQuery resize to aspect ratio

Answer 2

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.

Answer 3

You should apply the rotation to the container, not the img.

http://jsfiddle.net/jaap/dGgrG/1/

The next problem you'll be facing however is that the rotation is applied from the original position.