Scaling generated content in CSS

Question

How do you scale an image added to: before or: after in CSS?

For example, I have a page that contains a book cover:

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

I want to use CSS to make it look more like a book, not just a cover. I can use: before, to add a second image to do this, but since all the books vary in size, I need to be able to scale this image to fit the cover of the book.

I tried

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

but this does not work when scaling an image.

Answer 1

you can scale it:

 transform: scale(0.7); 

but it will not work with px or%.

Answer 2

The generated image is always displayed 1: 1. You cannot scale it. When you adjust the size of the generated item, this works well. You can check it with the following CSS attributes:

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

You can see the red frame with the specified size, and the image content is cropped. But if you leave the overflow: scrolling, you will see an image exceeding its element.

(Tested on Firefox 11)

Answer 3

Try setting min-height and a max-height for both of them to the same value. Then it should scale the image to the desired size, while maintaining the correct aspect ratio. (And do it with the width you want to scale depending on)