CSS圖像大小調整

我創建了一個ePub，我希望圖像跨越頁面的整個寬度，但不要高於頁面高度的100％。理想情況下，如果圖像比頁面高（因此被裁剪），那麼它將被縮放到頁面的100％高度，相應地縮放寬度。CSS圖像大小調整

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

來源

2013-10-31 chendriksen

是不是'最大寬度'更符合邏輯？ –

如果圖像是頁面的整個寬度並保留其比例，那麼如果瀏覽器的大小比圖像的高度小，你想要做什麼？ – glomad

不高=被剪裁？ – DaniP

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

做一個容器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/

來源

2013-10-31 16:46:53 DaniP

對不起丹科，我應該更清楚，我其實想要相反！如果圖片對於頁面來說太高（因此會溢出），我希望將圖片縮放到100％的寬度，並根據高度進行調整。 – chendriksen

它是根據高度是100％的網頁？ – DaniP

對於肖像格式的圖像，您需要確保它們要麼是在分頁符之前，要麼設置爲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>

來源

2013-11-04 00:24:59 mzmm56

CSS圖像大小調整

回答

相關問題