图像大小不应该是 HTML/CSS答案

【问题标题】：Image is not the size it should be HTML/CSS图像大小不应该是 HTML/CSS
【发布时间】：2016-05-21 21:00:50
【问题描述】：

我刚开始创建的页面中的横幅出现了这个问题。我是 html 的初学者，在这里找不到任何类似的问题，如果之前已经回答过，我很抱歉，现在好了。我的样式表上有这个：

body            {
            width: 900px;
            margin: auto;
            max-width: 900px;
            min-width: 300px;
            background-attachment: fixed;
            background-size: cover;
            background-image: url(images/seagull-sunset2.jpg);
            }

#banner img     {
            width: 100%;
            height: 200px;
            max-width: 100%;
            box-shadow: 2.5px 2.5px 5px 2.5px rgba(240,168,48,0.5);
            }

据此，我认为横幅 img 应该是 900px 或与其父 div 一样大，但由于某种原因，横幅仍然比 body 小 20-30 px，当我将其宽度设置为 900px 而不是 100 % 图像有点向右对齐并脱离了身体。提前感谢您的帮助

【问题讨论】：

你的 css 在 900px 处显示一个 body，无论如何。---- 横幅图像，应该是 900px 除非你设置了 padding 或宽度为横幅。--你能设置一个 sn-p或 jsfiddle/codepen 与您的代码部分显示您的问题，这将有助于您获得有效的帮助。
你能用你的代码设置一个 jsfiddle 或 codepen，或者用#banner 的样式编写你的 HTML
我不确定你是不是这样做的，但这里是 jsfiddle.net/guidogr95/3kbpk8ub 有问题的 html 和 css 部分

标签： html css

【解决方案1】：

如果你想完全包含图像，那么试试这个：

background-size: contain;
background-position: center center;

但请注意，body 的大小与客户端设置的大小相同，因此宽度不会总是 900px。

【讨论】：

横幅，正文中的图像不能放大到 900 像素。那是我的问题

【解决方案2】：

您只需将其添加到您的 css 中，问题就会得到解决

#banner{
  margin:0;
}

【讨论】：

【解决方案3】：

您不能在 body 标记上设置 100% 以外的宽度，因为您无法控制用户浏览器窗口的宽度。如果 900px 必须是您的内容的宽度，请尝试在所有其他内容周围的 body 标记之后添加一个 div 标记，如下所示：

<body>
<div class="wrapper">
<figure id="banner">
    <img src="" />
</figure>
</div>
</body>

然后使用这个css：

body {
    width: 100%;
    background-attachment:fixed;
    background-size: cover;
    background-position: center;
    background-image: url(images/seagull-sunset2.jpg);
}

.wrapper {
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
}

您的内容将达到最大 900 像素宽度，并且您身体上的图像将调整大小以适应浏览器窗口的宽度，无论其像素宽度是否小于 900 像素。图片会自动填满可用空间。

此外，当浏览器窗口的宽度小于 900 像素时，96% 的包装器宽度将确保您的内容位于浏览器窗口的中间，左右留有 2% 的边距。

也像这样设置你的img css：

#banner img {
    width: 100% !important;
    height: auto !important;
}

这将确保图像的大小与横幅的整个宽度一致，并且不会被压扁。

【讨论】：