如何按比例調整多個圖像的大小？

Question

我正在創建一個具有多個圖像層的新HTML5頁面。第一層是一個背景圖層，它是一個全屏圖像（與屏幕尺寸成正比）。

第二層是另一個圖像對象，這是我想在正比於第一層上的固定位置;所以如果我改變了瀏覽器的大小，兩張圖片都會改變大小，所以它們彼此成比例。

有沒有人有任何想法我該怎麼做？

Answer 1

所以，讓我們假設我們有一個「sky.jpg並將」背景圖像和在它上面一個「sun.png」的形象。

這裏是HTML（5）代碼：

<div id="sky"> 
<img src="sun.png" id="sun"> 
</div> 

這裏是響應CSS：

#sky { 
    width:100%; /* width in percentage, so it will adapt to user's screen */ 
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */ 
    background:url(sky.jpg) top center no-repeat; 
    text-align:center; /* #sun will be centered, not sure it's what you need */ 
    background-size:cover; 
    -moz-background-size:cover; 
} 
#sun { 
    width:15%; /* adjust it to the needed ratio */ 
    max-width:300px; /* max-width will prevent it from being bigger than the original image */ 
    min-width:20px; /* min-width is optional */ 
} 

Live demo（調整窗口大小）

---

通知的background-size財產設置爲cover（more info here）。

這意味着，縱橫比將被保留to the smallest size such that both its width and its height can completely cover the background positioning area。

這就是爲什麼你需要比大多數分辨率更大的圖像（如果它是身體背景圖像）。該物業

其他可能的值是「遏制」和「自動」（have a look at the specs）。

background-size:cover;是not supported by IE8（這就是爲什麼我們還添加top center背景定位）和一些FF版本，你需要一個供應商的前綴（-moz-）

---

現在你可以在百分比＃設置寬度太陽，所以它會保持一個比例，以包含div。爲防止它變得比原始尺寸大，您可以設置max-width（最終爲min-width）。

在現代瀏覽器中圖像的高度將自動調整。

---

如果你不想上#sky一個固定的高度，確保其容器也比汽車不同的高度（默認值）。

例如，如果#sky是你的頁面的背景圖片，你已經設置：

html, body { height:100%; } 
#sky { height:100%; }