Skalowanie wygenerowanej zawartości w CSS

Question

Jak przeskalujesz obraz dodany w: przed lub: po w CSS?

Na przykład, mam stronę, która zawiera Okładka książki:

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

chcę użyć CSS, aby wyglądał bardziej jak książki, a nie tylko okładki. Mogę użyć: wcześniej, aby dodać do tego drugi obrazek, ale ponieważ wszystkie książki różnią się rozmiarem, muszę mieć możliwość skalowania tego obrazu tak, aby pasował do okładki książki.

Próbowałem

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

} 

ale to nie działa w skalowania obrazu.

Answer 1

Spróbuj ustawić min-height i max-height dla obu z nich na tę samą wartość. Następnie należy skalować obrazy do prawidłowego rozmiaru, zachowując prawidłowy współczynnik proporcji. (I zrób to z szerokością, w zależności od tego, który chcesz skalować)

Answer 2

Wygenerowany obraz jest zawsze wyświetlany 1: 1. Nie możesz tego skalować. Kiedy naprawiasz rozmiar generowanego elementu, to działa dobrze. Można to sprawdzić w następujące atrybuty CSS:

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

Można zobaczyć czerwoną ramkę o określonej wielkości, a zawartość obraz jest obcięty. Ale jeśli zapomnisz o przepełnieniu: przewiń, zobaczysz obraz przekraczający jego element.

(testowane na Firefox 11)

Answer 3

można go skalować:

transform: scale(0.7); 

ale to nie będzie działać z px lub%.