CSS Bild Schlichte

Question

Ich erstelle eine ePub, und ich mag die Bilder über die volle Breite der Seite zu überbrücken, aber nie höher zu sein als 100% der Höhe der Seite.

Idealfall, wenn das Bild höher als die Seite war (und daher abgeschnitten), dann wäre es, statt auf 100% der Höhe der Seite skaliert wird, Skalierung die Breite entsprechend. in keinem Verhältnis

max-height scheint nur das Bild Squash, irgendwelche Ideen?

Answer 1

Nur Lösung, die ich verstehe "nicht größer = abgeschnitten" ... Proportionen beibehalten:

einen Behälter bilden mit overflow:hidden

HTML

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

CSS

* { 
    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; 
} 

Demo http://jsfiddle.net/zbvhx/

Answer 2

Für Bilder im Hochformat sollten Sie sicherstellen, dass ihnen entweder ein Seitenumbruch vorangestellt ist, oder page-break-inside:avoid; und in einen Container mit 100% (oder knapp darunter) verpackt werden Überlauf auf die nächste Seite). es ist seltsam sowohl margin:0 auto; enthalten zu haben und für das Bild display:inline-block;, zu sein (zumal inline-block ist nicht offiziell Teil der epub2 spec), aber Sie arbeiten gegen die Macken in verschiedenen Lesern das Bild zum Zentrum:

CSS:

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

html:

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

für Landschaftsbilder finden Sie auch die Bilder in einem Behälter wickeln möchten, die zu 100% Breite eingestellt ist, und stellen Sie dann die Größe des Bildes selbst in Prozentsatz s.

css:

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

html:

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

ich noch nie eine Lösung gefunden haben, die für beide Bildformate ausmacht, wenn Sie eine SVG-Wrapper verwenden, die Folgendes umfassen muss die gewünschten Abmessungen des Bildes:

<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>