Escalado de contenido generado en CSS

Question

¿Cómo escalar una imagen añadida en: antes o después en CSS?

Por ejemplo, tengo una página que contiene una portada de libro:

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

Quiero usar CSS para hacer que se vea más como un libro, en lugar de sólo una tapadera. Puedo usar: antes para agregar una segunda imagen para hacer esto, pero como todos los libros varían en tamaño, necesito poder escalar esta imagen para que se ajuste a la portada del libro.

He tratado

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

} 

pero esto no funciona en la ampliación de la imagen.

Answer 1

Intente configurar un min-height y un max-height para ambos con el mismo valor. A continuación, debe escalar las imágenes al tamaño correcto manteniendo la relación de aspecto correcta. (Y haga eso con el ancho, dependiendo de cuál desea escalar)

Answer 2

La imagen generada siempre se muestra 1: 1. No puedes escalarlo. Cuando arreglas el tamaño del elemento generado, eso funciona bien. Se puede comprobar con los siguientes atributos de CSS:

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

se puede ver el borde rojo con el tamaño especificado, y el contenido de la imagen se recorta. Pero si omite el desbordamiento: desplazamiento, verá que la imagen excede su elemento.

(probado en Firefox 11)

Answer 3

se puede escalarla:

transform: scale(0.7); 

pero no va a trabajar con px o%.