Anpassen des übergeordneten Elements des css-transformierten Bildes an die Größe. (Twitter Bootstrap)

Question

Ich verwende derzeit Twitter Bootstrap auf ein neues Projekt. Der Hauptteil des Projekts ist eine Thumbnail-Galerie, genau wie die in ihren Beispielen (hier: http://twitter.github.com/bootstrap/components.html#thumbnails).

Problem ist, ich bin derzeit css-transforming (rotierende, im Grunde) Bilder bei Bedarf entsprechend ihrer EXIF-Orientierung Daten. Wenn ich eine Transformation (unter Verwendung von -webkit-transform für den Moment, während ich Chrome teste) auf eine img anwende, bleibt das übergeordnete Element gleich und das Bild "überläuft" seinen Container.

Mit Chrome können Sie dieses Verhalten testen, indem Sie zum Beispiel die Miniaturbildergalerie, die ich zuvor verlinkt habe, eines der Platzhalterbilder untersuchen und dem Tag img eine style="-webkit-transform: rotate(90deg)-Eigenschaft hinzufügen. Bild überläuft das Containerelement li und unterbricht das Layout.

Gibt es eine Möglichkeit, dies zu lösen und Bootstrap behandeln ein CSS-gedrehtes Bild, als ob es ursprünglich so wäre? Ich dachte daran, Höhe und Breite des Tags img manuell festzulegen, und ihre Eltern würden anpassen, aber ich kann nicht wissen, welche Größe das Bild auf der Serverseite gerendert wird, bevor sie tatsächlich gerendert werden, so scheint dies auszuschließen dieser Ansatz.

Oh, und übrigens, ich weiß, ich könnte auf der Server-Seite drehen, ich weiß, es ist nicht schwer, ich würde es sehr viel lieber im Browser tun, wenn überhaupt möglich.

Irgendwelche Ideen?

Danke!

EDIT: Jaap vorgeschlagen, ich den gesamten Container zu drehen, das würde perfekt funktionieren, wenn es nicht für die Tatsache, dass ich Textknoten in der Miniaturansicht li s. Durch Drehen des Containers wird der Text ebenfalls gedreht angezeigt.

Answer 1

Ok, in diesem Fall, dass Sie es so gelten sollte:

<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.) */ 
} 

prüfen die Geige aus: http://jsfiddle.net/dGgrG/4/

Das einzige ärgerliche Bit ist, dass Max- width stuff in Bootstrap vermasselt dein Seitenverhältnis. Dies passiert, wenn Sie das Bootstrap-Grid verwenden. Sie könnten es in CSS übergehen, oder Javascript könnte Ihnen helfen.

Um es mit JS zu beheben, sollten Sie einen Blick auf diese 2 Beiträge haben:

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

jQuery resize to aspect ratio

Answer 2

Sie sollten die Rotation auf den Container anwenden, nicht die IMG.

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

Das nächste Problem, das Sie jedoch mit Blick auf sein müssen, ist, dass die Drehung von der ursprünglichen Position angewandt wird.

Answer 3

Als Referenz Daten der (neu) CSS Weg Rotation lösen Bild basierend auf EXIF ist die image-orientation: from-image Eigenschaft.

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

Diese Problemen alle durch die neue CSS Bildorientierung Eigenschaft gelöst werden, die nun von Firefox 26 unterstützt, wenn die Stil Bildorientierung: von Bild zu a angelegt wird JPEG-Bild, berücksichtigt der Browser sein EXIF-Orientierungs-Tag, wenn das Layout und das Rendering ausgeführt wird. Das heißt, Smartphone- und Digitalkamerabilder können jetzt in ihrer richtigen Ausrichtung nativ vom Browser angezeigt werden, nur durch Hinzufügen einer einzigen CSS-Eigenschaft!

Hier ist das erste Bild in diesem Artikel wieder, aber dieses Mal mit Bildorientierung angewendet. Wenn Sie Firefox 26 verwenden, sehen Sie dieses Bild gerendert, wie es beabsichtigt war, mit dem Himmel oben und dem Boden auf der Unterseite.