去除全屏img中的白色条纹答案

【问题标题】：Removing white stripes in fullscreen img去除全屏img中的白色条纹
【发布时间】：2018-01-14 06:52:48
【问题描述】：

我目前正在尝试制作目标网页，但遇到了问题。 <img> 周围有一些白色条纹，它是looks like this。

我希望图片是全屏的，没有任何条纹等。

<!DOCTYPE HTML>
<head>
    <title>Szafranowka - Apartments & Restaurant </title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="background">
            <img src="background.jpg" id="background"> </img>
        </div>

    </div>
</body>
</html>

这里是 CSS：

#container
{
    width: 100%;
    height: 100%;
}

#background
{
    width: 100%;
    height: auto;
    opacity: 0.6;
    position: relative;
}

【问题讨论】：

Unknown white border around my content的可能重复

标签： html css

【解决方案1】：

填充会自动应用于正文。

只需将其添加到您的 css 中

body{
  padding:0;
  margin:0;
}

编辑：在 cmets 中跟进的解决方案

您将需要删除 <img> 标记并更改 CSS 中的背景 div

#background
{
    width: 100%;
    height: auto;
    background: url("background.jpg");
    background-size: cover;
    opacity: 0.6;
    position: relative;
}

【讨论】：

完成之后，它看起来像这样：gyazo.com/408a9eb76f57ce43500c29a88d895edd 知道如何去除底部的大条纹吗？ :)
我会说那是因为图像高度不足以覆盖整个页面。我将在我的答案中添加解决方案。
可以拉伸图像，而不必将其变成带有背景图像的 div。不过，不支持 IE 和较旧的 Edge 版本。
在保持其纵横比的同时这是否可行？我一直只是恢复将其设置为背景。
您可以在我附加到答案的 sn-p 中看到它的实际效果。 background-size: cover 不保持纵横比或确保整个图像部分可见，它从中心（50% 50%）缩放并成功覆盖整个区域，无论图像多么小。您只能使用developer.mozilla.org/en-US/docs/Web/CSS/background-origin 或决定大小的父容器来控制原点。

【解决方案2】：

默认情况下，每个 HTML 标记都具有浏览器预定义的外观/样式，例如，在您的情况下，正文在 Chrome 上具有 margin: 8px。您需要重置所有这些预定义的样式规则以避免意外，请在https://cssreset.com/what-is-a-css-reset/阅读有关 CSS 重置的信息

此外，为了拉伸图像以覆盖所有可见区域，您需要确保body 具有width: 100vw;（视口宽度）和height: 100vh;（视口高度），其他所有内容都具有100%两者兼有或从父母那里继承。

在https://codepen.io/Raven0us/pen/KZQejX工作sn-p

【讨论】：

现在有机会让它“响应式”吗？
它是响应式的，如果你检查我的sn-p，调整大小不会影响图像覆盖整个区域的事实。如果“响应”是指让图像拉伸（覆盖整个区域）并仍然显示它的所有部分，那么在不损失很多质量的情况下是不可能的。在较小的屏幕上使用object-fit: contain; 而不是object-fit: cover; 检查它的外观。因为高度通常是宽度的两倍或更多，所以在手机上使用它会更好看。
您需要将其包装在媒体查询中，以便它仅在手机上应用contain，并在平板电脑+（包括桌面）上保留cover。
我明白了，那又如何：我想像这样实现：gyazo.com/6b9fb9042820d9ef9b27cb054c622b92 仅使用 html 和 css 代码？因为当我尝试在图形上应用文字时，它看起来很糟糕，文字被拉伸和像素化。
当然，在图形上应用文字实际上是 2000 年代，除非 1) 你是一个懒惰的开发人员，2) 维护网站的人具有非常好的 Photoshop 技能，并且可以为多种设备提供修改版本/breakpoints, 3) 你不关心响应能力。

【解决方案3】：

浏览器将自己的默认样式应用于您可以使用自己的 css 更改的网站。看看这个cheat sheet

一个简单的解决方法是添加 css：

body{
   margin:0;
}

【讨论】：