如何使用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="">