我正在创建一个ePub,我希望图像跨越页面的整个宽度,但永远不要超过页面高度的100％.
理想情况下,如果图像比页面高(并因此被剪裁),那么它将被缩放到页面的100％高度,宽度相应地缩放.
最大高度似乎只是压缩图像不成比例,任何想法？
最佳答案
对于纵向格式的图像,您需要确保它们先是分页符,或者设置分页内部：避免;并且包裹在一个100％高的容器中(或者只是在它之下,以便它不会溢出到下一页).包括两个保证金：0 auto是很奇怪的;并且对于要显示的图像：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：
对于横向图像,您还需要将图像包装在设置为100％宽度的容器中,然后以百分比形式调整图像本身的大小.
CSS：
.imageWrapperWide {
width:100%;
text-align:center;
page-break-inside:avoid;
}
.imageWrapperWide img {
display:inline-block;
width:100%;
margin:0 auto;
}
HTML：
我从来没有遇到过这两种图像格式的解决方案,除非您使用的SVG包装器必须包含所需的图像尺寸：
原文链接：https://www.f2er.com/css/427571.html
