主页 / 问题 / 1399193
Accepted
S.H.
Asked:2022-06-11 21:41:44 +0000 UTC2022-06-11 21:41:44 +0000 UTC

HTML & CSS：为什么你必须将图像缩小 20 像素以便没有滚动条？

  • 772

亲爱的鉴赏家，

我挣扎了几个小时，迭代了正文、页面等的所有属性，但我无法弄清楚。

我以编程方式生成一张完全适合屏幕尺寸的图片。

我在浏览器中显示它，全屏打开（粗略地说，按 F11）。

但！而我是人造的！生成图像时，我不会将其减少 20 像素（宽度和高度） - 它在页面两侧（右侧和底部）显示滚动条。

我怀疑我没有为某些容器明确写过类似“margn: 0; padding: 0”的东西。

这是html：

    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body scroll="no" style="body-style">

    <!-- The video -->
    <video autoplay muted loop id="myVideo">
      <source src="Videos/Sparks-smallsize.mp4" type="video/mp4">
    </video>

    <div class="pngcontainer">
        <img src="images/image1.png">
    </div>

    <div class="logo-bottom">
      <img src="images/logo-small.png">
    </div>

    </body>

这是CSS：

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.body-style {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 0;
    padding: 0;
}

.logo-bottom {
  position: fixed;
  bottom: 0;
  width: 215px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 15px;
}

.pngcontainer {
  position: relative;
  z-index: 101;
  top:0;
  left:0;
    margin: 0;
    border: 0;
    padding: 0;
}

这是它在屏幕上的外观 - 请参阅滚动条：

带滚动条

这是存储库中文件夹的链接。有一张 2541 x 1421 大小的图片，如果你把它做成 2540 x 1420 大小，滚动条就会消失。屏幕尺寸为 2560 x 1440。

一个小的更正：我做了一个页面，你可以在浏览器中打开并查看它，只是它是为我的显示器分辨率设计的，请考虑这一点。

感谢您的提示！

html

1 个回答

  1. Best Answer

    大概是这样的：

    从题中可以看出题主以为写body-style类会用它覆盖body标签的所有属性，但事实并非如此。

    //Вклад в будущее
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.body-style {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
}

.logo-bottom {
  position: fixed;
  bottom: 0;
  width: 215px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 15px;
}

.pngcontainer {
  position: relative;
  z-index: 101;
  top: 0;
  left: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
    <!DOCTYPE html>
<html lang="ru">

<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body scroll="no" style="body-style">

  <!-- The video -->
  <video autoplay muted loop id="myVideo">
      <source src="Videos/Sparks-smallsize.mp4" type="video/mp4">
    </video>

  <div class="pngcontainer">
    <img src="images/image1.png">
  </div>

  <div class="logo-bottom">
    <img src="images/logo-small.png">
  </div>

</body>

    • 2

相关问题