CSS图像大小

Question

我正在创建一个ePub,我希望图像跨越页面的整个宽度,但永远不要超过页面高度的100%.

理想情况下,如果图像比页面高(并因此被剪裁),那么它将被缩放到页面的100%高度,宽度相应地缩放.

max-height 似乎只是压缩图像不成比例,任何想法？

Answer 1

我理解的唯一解决方案是“不更高=修剪”......以保持比例：

制作一个容器overflow:hidden

超文本标记语言

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