无法获得 100% 宽度的图像（不是因为小容器，不是背景）答案

【问题标题】：Can't get image to 100% width (not due to small container, not background)无法获得 100% 宽度的图像（不是因为小容器，不是背景）
【发布时间】：2014-11-27 00:28:54
【问题描述】：

我想在首页上显示这张图片。它位于我的背景图像之上（具有 100% 的工作跨度）但是它上面的图像有一个 +- 5px 的小边框显示背景。边界需要走:)

我的 CSS 如下所示：（导航固定在顶部）

body {
    background: url(backgr_1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    background-size:cover;
}

nav {
    position:fixed;
    z-index: 100;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 58px;
    font-family: 'chineserocks';
    font-size: 3em;
}

ul {
    list-style-type: none;
    margin-top: 0;
    }

li {
    display: inline-block;
}

a {
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 4em;   
    }

#backroots_head {
    width: 100%;
}

#head_section {
    width: 100%;
}

我的 HTML 是这样的：

<body>
    <section id="head_section">
        <img id="backroots_head" src="backroots_head.jpg">
    </section>

以及所有其余的 html 等

这是基本的东西。

我尝试过的： - 添加最大宽度 3000px - 边距 0，填充 0 - 宽度 105%（是的，我很绝望 xD） - 固定位置（有效，但您无法滚动到图片下方的内容。 - 在它周围添加一个宽度为 100% 的 div

图像或部分周围没有设置宽度的容器，所以这也不是问题。我真的坚持这个。欢迎任何解决方案。亲切的问候

【问题讨论】：

实物图片有多大？
margin:0 在哪里？你在使用重置吗？ ...可以是body margin吗？
我猜你需要重置 body、div、section ... 边距、padding 0... 你有指向该站点的链接吗？还是小提琴？
是否有针对“head-section”元素的 CSS？
你能为此制作一个 JSFiddle 吗？如果我们不必在脑海中想象您正在查看的内容，那将会更容易。这听起来像一个边界：无；它也听起来像溢出，它也听起来像一个边距和/或相对位置等......它可能有很多东西。

标签： html image css width

【解决方案1】：

我将主体边距设置为 0 以消除图像周围的空间。它对我来说是 100% 的。

<html>
<head>
<style>
body { margin: 0px; }
#backroots_head { width: 100%; }
</style>
</head>
<body>

<section id="head_section"><img id="backroots_head" src="backroots_head.jpg"></section>

</body>
</html>

【讨论】：

我使用的图像是 1000x1000。我的浏览器是 1980x1080 并且图像拉伸 100%，无论我将浏览器设置为什么尺寸。
yessss 正文边距/填充是解决方案。非常感谢！