如何使用css在网站上调整图像大小

Question

我有一个1400px乘660px的图像，并希望它覆盖浏览器窗口的整个宽度和高度，而不必滚动到视口之外。如何使用css来控制尺寸？

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这样的事情：

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

使用HTML：

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

这将“拉伸”图像以适应屏幕..如果您想保留图像的比例，我建议将其替换为div，图像为background-image和{ {1}}设置为background-size。