Question

我无法全屏显示图像。如果我创建一个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>

Answer 1

您可以尝试将height: 100vh添加到#foto元素中。希望对您有所帮助。

Answer 2

您想将图片设为背景图片，而不是嵌入式图片，例如使用背景属性代替match_id team teamA_Win Outcome 0 1 A True True 1 2 B True False 2 3 A False False标签：

<img />

如果这是您完整网站的HTML，则看起来您不需要JavaScript即可使标题停留在窗口顶部。您只需使用CSS即可获得所需的固定标头。

body {
  margin: 0;

  /* Fullscreen image */
  /* get the image source */
  background-image: url('/path/to/image.png');

  /* center it */
  background-position: center center;

  /* fix it to the window so it doesn't scroll */
  background-attachment: fixed;

  /* ensure it covers the whole screen */
  background-size: cover;
}

.header { position: fixed; top: 0; left: 0; width: 100%; }将元素从常规流程中拉出，因此您需要过度补偿标头的高度，否则它将覆盖您的某些内容：

position: fixed;

将.header-buffer { /* overcompensate for fixed header */ padding-top: 60px; }类添加到在标头后面包含内容的元素中。

本质上：

删除图像标签
删除.header-buffer的所有CSS
删除您的JavaScript
将背景属性添加到正文CSS
将#foto类添加到具有.header-buffer类的同一元素中，例如.container

以下是示例CodePen：

预览：https://codepen.io/tinacious/full/wRvKwy
source code

在示例中，您可以看到窗口可以是任何大小，并且图像将占据整个屏幕。网站内容也是可滚动的，因此您可以看到标题固定在顶部。

如何全屏显示图像？

2 个答案: