如何使用css調整網站上的圖像的大小

Question

我有一幅1400像素x 660像的圖像，並希望它覆蓋瀏覽器窗口的全部寬度和高度，而不必在視口之外滾動。我怎樣才能實現這個使用CSS來控制尺寸？

Answer 1

嘗試這樣：

#myImg{ 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
} 

與HTML：

<img id="myImg".... > 

這將「拉伸」的形象，以適應屏幕。如果你想保持圖像的比例我建議將其替換爲div，圖像爲background-image和background-size設置爲cover。

Answer 2

body{ 
 
margin: 0; 
 
} 
 
img{ 
 
min-width: 100vw; 
 
min-height: 100vh; 
 
position: fixed; 
 
left: 50%; 
 
top: 50%; 
 
transform: translate(-50%, -50%); 
 
}

<img src="http://lorempixel.com/1400/660/nature/" alt="">