CSS图像大小调整

Question

我创建了一个ePub，我希望图像跨越页面的整个宽度，但不要高于页面高度的100％。理想情况下，如果图像比页面高（因此被裁剪），那么它将被缩放到页面的100％高度，相应地缩放宽度。

max-height似乎只是挤出图像不成比例，任何想法？

Answer 1

唯一能做的我明白了， “身高不修剪=” ...保留比例：

做一个容器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; 
} 

演示http://jsfiddle.net/zbvhx/

Answer 2

对于肖像格式的图像，您需要确保它们要么是在分页符之前，要么设置为page-break-inside:avoid;，并且包装在100％高的容器中（或正好在其下方，以便它不会溢出到下一页）。它的怪异不得不包括margin:0 auto;和图像是display:inline-block;，（特别是因为inline-block不是epub2规范的正式组成部分），但你对各种读者的怪癖工作居中图像：

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> 

你还需要包装在被设置为100％宽度的容器中的图像，然后调整图像本身的尺寸景观图片百分比秒。

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> 

我从来没有碰到过，这同时说明图像格式，除非你正在使用SVG的包装，其中必须包括一个解决方案图像的所需尺寸：

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