Định cỡ hình ảnh CSS

Question

Tôi đang tạo ePub và tôi muốn hình ảnh trải rộng toàn bộ chiều rộng của trang nhưng không bao giờ cao hơn 100% chiều cao của trang.

Lý tưởng nhất, nếu hình ảnh cao hơn trang (và do đó bị cắt bớt) thì thay vào đó nó sẽ được chia tỷ lệ thành 100% chiều cao của trang, chiều rộng mở rộng cho phù hợp.

max-height dường như chỉ làm giảm tỷ lệ hình ảnh, bất kỳ ý tưởng nào?

Answer 1

Chỉ giải pháp tôi hiểu, "không cao = cắt bớt" ... để duy trì tỷ lệ:

Thực hiện một container với 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

cho hình ảnh ở định dạng dọc, bạn sẽ muốn đảm bảo chúng được đặt trước bằng ngắt trang hoặc đặt page-break-inside:avoid; và được gói trong một vùng chứa cao 100% (hoặc ngay dưới đó sao cho nó không tràn đến trang tiếp theo). đó là lạ phải bao gồm cả margin:0 auto; và cho hình ảnh được display:inline-block;, (đặc biệt là kể từ khi inline-block không phải là chính thức một phần của spec epub2) nhưng bạn đang làm việc chống lại những khuyết tật trong các độc giả khác nhau để tập trung hình ảnh:

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> 

cho hình ảnh phong cảnh bạn cũng sẽ muốn quấn hình ảnh trong một container đó là thiết lập để 100% chiều rộng, và sau đó điều chỉnh kích thước của hình ảnh bản thân trong tỷ lệ phần trăm 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> 

tôi chưa bao giờ đi qua một giải pháp mà chiếm cả hai định dạng hình ảnh, trừ khi bạn đang sử dụng một wrapper SVG, trong đó có bao gồm kích thước mong muốn của hình ảnh:

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