Ridimensionamento del contenuto generato nei CSS

Question

Come si ridimensiona un'immagine aggiunta in: prima o: dopo in CSS?

Per esempio, ho una pagina che contiene una copertina del libro:

<span class="book"> 
    <img src="http://ecx.images-amazon.com/images/I/41t7xMPK%2B6L.jpg" /> 
</span> 

voglio usare i CSS per farlo sembrare più simile a un libro, piuttosto che solo una copertura. Posso usare: prima di aggiungere una seconda immagine per farlo, ma dato che tutti i libri hanno dimensioni variabili, ho bisogno di essere in grado di ridimensionare questa immagine per adattarla alla copertina del libro.

ho cercato

.book:before{ 
    content:url("/images/book.png"); 
    position:absolute; 
    height:100%; 
    width:100%; 

} 

, ma questo non funziona nel ridimensionamento dell'immagine.

Answer 1

Provare a impostare uno min-height e uno max-height per entrambi allo stesso valore, Dovrebbe quindi ridimensionare le immagini alle dimensioni corrette mantenendo le proporzioni corrette. (E farlo con la larghezza, a seconda di quale si desidera ridimensionare)

Answer 2

L'immagine generata viene sempre visualizzata 1: 1. Non puoi ridimensionarlo. Quando si aggiusta la dimensione dell'elemento generato, ciò funziona bene. Si potrebbe verificare con i seguenti attributi CSS:

#logo-image:before 
{ 
    display: block; 
    content: url(img/logo.png); 
    width: 300px; 
    height: 100px; 
    border: solid 1px red; 
    overflow: scroll; /* alternative: hidden */ 
} 

si può vedere il bordo rosso con le dimensioni specificate, e il contenuto dell'immagine è ritagliato. Ma se tralascia l'overflow: scorri, vedrai l'immagine oltre il suo elemento.

(Testato su Firefox 11)

Answer 3

si può ridimensionarlo:

transform: scale(0.7); 

ma non funziona con px o%.