सीएसएस छवि आकार

Question

मैं एक ईपुब बना रहा हूं, और मैं छवियों को पृष्ठ की पूरी चौड़ाई फैलाना चाहता हूं, लेकिन पृष्ठ की ऊंचाई से 100% से अधिक लंबा नहीं होना चाहिए।

आदर्श रूप से, यदि छवि पृष्ठ की तुलना में लम्बा था (और इसलिए फिसल गई) तो इसे पृष्ठ की 100% ऊंचाई तक स्केल कर दिया जाएगा, तदनुसार चौड़ाई स्केलिंग।

max-height लगता है कि छवि को अनुपात, किसी भी विचार से बाहर स्क्वैश करना प्रतीत होता है?

Answer 1

केवल समाधान मुझे समझ, "नहीं लम्बे = काटा" ... अनुपात को बनाए रखना:

साथ overflow:hidden

एचटीएमएल

<div id="container"> 
    <img src=" "/> 
</div> 

सीएसएस

* { 
    margin:0; 
    padding:0; 
} 
body, html { 
    height:100%; 
} 
#container { 
    max-width:100%; 
    height:100%; 
    max-height:100%; 
    overflow:hidden; 
} 
#container img { 
    width:100%; 
    height:auto; 
} 

एक कंटेनर बनाने

डेमो http://jsfiddle.net/zbvhx/

Answer 2

पोर्ट्रेट प्रारूप में छवियों के लिए आप यह सुनिश्चित करना चाहते हैं कि वे या तो पृष्ठ-ब्रेक से पहले हैं या page-break-inside:avoid; सेट करें और एक कंटेनर में लपेटें जो 100% ऊंचा है (या बस इसके तहत अगले पृष्ठ पर अतिप्रवाह)। यह दोनों margin:0 auto; शामिल करने के लिए अजीब है और छवि display:inline-block; होने के लिए, (विशेष रूप से inline-block आधिकारिक तौर पर epub2 कल्पना का हिस्सा नहीं है), लेकिन आप छवि केंद्र के लिए विभिन्न पाठकों में quirks के खिलाफ काम कर रहे हैं:

सीएसएस:

.imageWrapperHi { 
    height:99%; 
    width:100%; 
    text-align:center; 
    page-break-inside:avoid; 
} 
.imageWrapperHi img { 
    display:inline-block; 
    height:100%; 
    margin:0 auto; 
} 

एचटीएमएल:

<div class="imageWrapperHi"> 
    <img alt="" src="../Images/img1.jpg"/> 
</div> 

परिदृश्य छवियों आप भी एक कंटेनर है कि 100% चौड़ाई के लिए सेट में छवियों रैप करने के लिए, और फिर छवि अपने आप में के आकार को समायोजित करने के लिए चाहता हूँ प्रतिशत रों।

सीएसएस:

.imageWrapperWide { 
    width:100%; 
    text-align:center; 
    page-break-inside:avoid; 
} 
.imageWrapperWide img { 
    display:inline-block; 
    width:100%; 
    margin:0 auto; 
} 

एचटीएमएल:

<div class="imageWrapperWide"> 
    <img alt="" src="../Images/img1.jpg"/> 
</div> 

मैं एक समाधान है कि दोनों छवि प्रारूप के लिए खातों, जब तक आप एक एसवीजी आवरण, शामिल करने के लिए है जो प्रयोग कर रहे हैं भर में कभी नहीं आए हैं छवि के वांछित आयाम:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 <image width> <image height>" preserveAspectRatio="xMidYMid meet"> 
    <image width="<image width>" height="<image height>" xlink:href="../Images/cover.jpg"/> 
</svg>