Setting the parent element of the css-converted image to match. (Twitter Bootstrap)

Question

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

The problem is that I am currently css-transforming (rotating, mostly) the picture, if necessary, in accordance with my EXIF ​​orientation data. When I apply the transform (using -webkit-transform at the moment, when I test in Chrome), img , its parent element remains the same, and the image “overflows” its container.

Using Chrome, you can check this behavior using the example of the thumbnail gallery that I linked to earlier and check one of the placeholder images and add the style="-webkit-transform: rotate(90deg) property style="-webkit-transform: rotate(90deg) to the img tag. The image overflows the li container element and breaks up the layout.

Is there a way to solve this problem and have bootloader with the processed CSS image as if it were originally that way? I thought about manually setting the height and width of the img tag and their parents will be configurable, but I cannot know what size will be displayed on the server side before they are actually displayed, so it seems to exclude this approach.

Oh, and by the way, "I know that I can resort to rotation on the server side, I know that it is not difficult, I 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 fine, if not for the fact that I have text nodes in miniature li s. Rotating the container will cause the text to be rotated.

Answer 1

Ok, in this 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 script: http://jsfiddle.net/dGgrG/4/

The only annoying bit is that the Max-width stuff in Bootstrap messed up your aspect ratio. This will happen when you use the Bootstrap grid. You can undo this throughout css, or javascript could help you.

To fix this with JS, you should take a look at these 2 posts:

Get real image width and height using JavaScript? (in Safari / Chrome)

jQuery resize aside

Answer 2

For reference, the (new) CSS way to solve 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/

All these problems are solved by using the new CSS image orientation property, which is now supported by Firefox 26. When the image orientation style: from image is applied to a JPEG image, the browser will take into account its EXIF ​​orientation tag when performing layout and rendering. This means that images of smartphones and digital cameras can now be displayed in the correct orientation by the browser, simply by adding one CSS property!

Here is the first image in this article, but this time with the image orientation applied. If you are using Firefox 26, you will see this image, pictured as it was intended, with sky above and earth at the bottom.

Answer 3

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

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

The next problem you will encounter is that rotation is applied from the starting position.