当我试图用图像填充我的网页时，我有一个问题。当我用我选择的图像填充我的网页时，图像会变得更大，并向下滚动以查看图像的其余部分。我希望图像不向下滚动，不拉伸图像，这保持了图像的原始外观。有什么办法解决这个问题吗?
下面是我的代码:<!DOCTYPE html>
<html lang="en">
<title>Global Shopping Mall</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-content" style="max-width:2000px;">
<!-- Automatic Slideshow Images -->
<div id="mySlides" class="mySlides w3-display-container w3-display-topright w3-center">
<img src="http://gshopping-mall.com/images/consv3.png" style="width:100%;height:100%;object-fit:cover;object-position:center;top:0;bottom:0;left:0;right:0;">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
</div>
</div>
<!-- End Page Content -->
</div>
</footer> -->
<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000);
}
</script>
</body>
</html>
有了style="width:100%;height:100%;，容器就会占用内容物的大小。你需要做style="width:auto;height:100vh;设置高度作为显示的高度和宽度将自动调整，或者你可以翻转它们有style="width:100vw;height:auto;
如果你想让图片不需要在页面上滚动就可以看到，你可以将object-fit属性设置为"而不是"Cover"，所以你的img标签将是:
<img src="http://gshopping-mall.com/images/consv3.png" style="width:100%;height: 100%;object-fit: contain;object-position:center;top:0;bottom:0;left:0;right:0;max-height: 100vh;">
这样做的问题是图像不能填满页面的宽度。
如果你想让图像填充宽度，而不是拉伸，你必须创建一个新的图像修改它的比例。
添加width: 100vw和height: 100vh。vw代表视口宽度，vh代表视口高度。
body {
margin: 0;
}
img {
width: 100vw;
height: 100vh;
object-fit: cover;
display: block;
}<img src="https://images.unsplash.com/photo-1613677446614-1039482c157f">