Oluşturulan içeriğin ölçeklendirilmesi CSS

Question

Eklenen bir resmi nasıl ölçeklendirirsiniz: öncesi veya: CSS sonra?

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

Ben yerine sadece bir kapak daha fazla kitap gibi görünmesi için CSS kullanmak istiyorum:

Örneğin, ben bir kitap kapağı içeren bir sayfa var. Bunu kullanabilirim: Bunu yapmak için ikinci bir görüntü eklemeden önce, ancak tüm kitaplar boyut olarak değiştiğinde, bu resmi kitap kapağına sığacak şekilde ölçeklendirebilmem gerekir.

Ben

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

} 

denedi ama bu resim ölçeklendirme çalışmaz.

Answer 1

Her ikisi de aynı değerde bir min-height ve max-height ayarlamayı deneyin, Daha sonra doğru en boy oranını koruyarak görüntüleri doğru boyuta ölçeklendirmelidir. (Ve bunu ölçeklendirmek istediğinize bağlı olarak genişlikle yapın)

Answer 2

Oluşturulan görüntü her zaman 1: 1 görüntülenir. Bunu ölçekleyemezsin. Oluşturulan öğenin boyutunu düzeltdiğinizde, bu iyi çalışır.

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

Belirtilen boyutta kırmızı sınır görebilir ve resim içeriği kırpılır: Aşağıdaki CSS özelliklerine sahip Bunu kontrol edebilir. Ancak taşmayı dışarıda bırakırsanız: kaydırma, görüntünün öğesinin üzerinde olduğunu görürsünüz. (Firefox 11 üzerinde test)

Answer 3

bunu ölçeklenebilir:

transform: scale(0.7); 

ama px veya% çalışmaz.