我无法全屏显示图像。如果我制作一个 css: .background {background: url....} 它工作正常但然后注意其他工作。所以我把它做成图像，但图像的高度并不比我的屏幕大，所以我必须滚动。谁能帮我解决这个问题，也许还能帮我找出其他错误？
谢谢<3
(我看到你看不到我正在谈论的图片，但也许你现在没有看到它的解决方案:D)
body {
height: 100%;
margin: 0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.logo {
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
#foto {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 1024px;
}<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<img src="straat.jpg" alt="street" id="foto">
<div class="centered">Centered</div>
</div>
</body>
</html>最佳答案
您可以尝试将height: 100vh 添加到#foto 元素。希望对您有所帮助。
关于html - 如何使图像全屏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53687876/