我正在尝试使图像(尺寸:1678 x 1302)适合窗口的宽度和高度，如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("background2.jpeg");
position: absolute;
background-repeat: repeat-x;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="bgimg" width=500 height=500>
</div>
</body>
</html>
图像应适合查看窗口。我不能使用 'background-repeat: repeat-y'，因为与顶部相比，图像底部的图像阴影不同。即使图像大小与窗口大小不匹配，是否有任何方法可以使图像正确地(不遗漏图像的任何部分)适合查看窗口？
最佳答案
try this
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url(images/marc.jpg);
position: absolute;
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
</style>
</head>
<body>
<div id="bgimg" width=500 height=500>
</div>
</body>
</html>
关于css - 如何使用 CSS 调整图像以适应窗口宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49743380/