सीएसएस में उत्पन्न सामग्री स्केलिंग

Question

आप इसमें शामिल छवि को कैसे स्केल करते हैं: पहले या: सीएसएस में बाद में?

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

मैं इसे नहीं बल्कि सिर्फ एक कवर की तुलना में, और अधिक एक किताब की तरह लग रहे बनाने के लिए सीएसएस का उपयोग करना चाहते:

उदाहरण के लिए, मैं एक पृष्ठ एक पुस्तक कवर शामिल है। मैं इसका उपयोग कर सकता हूं: ऐसा करने के लिए दूसरी छवि जोड़ने से पहले, लेकिन जैसा कि सभी पुस्तकें आकार में भिन्न होती हैं, मुझे पुस्तक कवर को फिट करने के लिए इस छवि को स्केल करने में सक्षम होना चाहिए।

मैं

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

} 

की कोशिश की है, लेकिन इस छवि स्केलिंग में काम नहीं करता।

Answer 1

min-height और max-height दोनों को एक ही मान के लिए सेट करने का प्रयास करें, फिर सही पहलू अनुपात को रखते हुए छवियों को सही आकार में स्केल करना चाहिए। (और है कि चौड़ाई है, जो एक आप पैमाने पर करने के लिए चाहते हैं पर निर्भर करता है के साथ करते हैं)

Answer 2

जनित छवि हमेशा 1 प्रदर्शित किया जाता है: 1। आप इसे स्केल नहीं कर सकते हैं। जब आप जेनरेट किए गए तत्व के आकार को ठीक करते हैं, तो यह अच्छी तरह से काम करता है। निम्नलिखित सीएसएस के साथ जिम्मेदार बताते हैं आप इसे जांच कर सकता है:

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

आप निर्दिष्ट आकार पर लाल बॉर्डर देख सकते हैं, और छवि सामग्री काटा गया है। लेकिन अगर आप ओवरफ्लो छोड़ देते हैं: स्क्रॉल करें, तो आप छवि को अपने तत्व से अधिक देखेंगे।

(फ़ायरफ़ॉक्स 11 पर परीक्षण किया गया)

Answer 3

आप इसे पैमाने पर कर सकते हैं:

transform: scale(0.7); 

लेकिन यह px या% के साथ काम नहीं करेगा।