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.
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)