Regolazione dell'elemento genitore dell'immagine trasformata da CSS per adattarla. (Twitter Bootstrap)

Question

Attualmente sto usando Twitter Bootstrap su un nuovo progetto. La parte principale del progetto è una galleria di miniature, esattamente come quella che hanno nei loro esempi (qui: http://twitter.github.com/bootstrap/components.html#thumbnails).

Il problema è che attualmente sto trasformando css (ruotando, fondamentalmente) le immagini quando necessario in base ai loro dati di orientamento EXIF. Quando applico una trasformazione (usando -webkit-transform per ora, come sto testando su Chrome) su un img, il suo elemento genitore rimane lo stesso, e l'immagine "trabocca" il suo contenitore.

Utilizzando Chrome, è possibile testare questo comportamento andando alla galleria di miniature di esempio che ho collegato prima, ispezionando una delle immagini segnaposto e aggiungendo una proprietà al tag img. L'immagine supera l'elemento del contenitore li e interrompe il layout.

C'è un modo per risolvere questo problema e il bootstrap considera un'immagine ruotata in css come se fosse originariamente in quel modo? Ho pensato di impostare manualmente l'altezza e la larghezza del tag img e i loro genitori si regolerebbero, ma non posso sapere quale dimensione verrà renderizzata l'immagine sul lato server, prima che vengano effettivamente renderizzati, quindi sembra che non debba questo approccio.

Oh, e, a proposito,  so che potrei ricorrere a rotazione sul lato server, so che non è difficile, vorrei solo molto preferire farlo nel browser, se possibile.

Qualche idea?

Grazie!

MODIFICA: Jaap ha suggerito di ruotare l'intero contenitore, il che funzionerebbe perfettamente se non fosse per il fatto che ho dei nodi di testo all'interno della miniatura li s. Ruotando il contenitore si farà ruotare anche il testo.

Answer 1

Ok, in questo caso si dovrebbe applicare in questo modo:

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

Partenza il violino: http://jsfiddle.net/dGgrG/4/

L'unica po 'fastidiosa è che max- il materiale di larghezza in Bootstrap incasina le proporzioni. Questo avverrà quando utilizzerai la griglia Bootstrap. Potresti sovrascriverlo in css, o javascript potrebbe aiutarti.

Per risolvere il problema con JS si dovrebbe avere uno sguardo a questi 2 posti:

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

jQuery resize to aspect ratio

Answer 2

È necessario applicare la rotazione al contenitore, non alla img.

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

Il problema successivo sarete di fronte, tuttavia, è che la rotazione è applicata dalla posizione originale.

Answer 3

Per riferimento, il (nuovo) modo CSS di risolvere rotazione delle immagini in base ai dati EXIF è la proprietà image-orientation: from-image.

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

Questi problemi sono tutti risolti dal nuovo CSS immagine-orientamento proprietà, che è ora supportato da Firefox 26. Quando lo stile immagine-orientamento: da-immagine viene applicata ad un Immagine JPEG, il browser prenderà in considerazione il suo tag di orientamento EXIF ​​quando si esegue il layout e il rendering. Ciò significa che le immagini di smartphone e fotocamere digitali ora possono essere visualizzate con il loro corretto orientamento in modo nativo dal browser, , solo aggiungendo una singola proprietà CSS!

Ecco la prima immagine di questo articolo, ma questa volta con l'orientamento dell'immagine applicato. Se stai usando Firefox 26, vedrai questa immagine sottoposta a rendering come previsto, con il cielo in alto e il terreno in basso.