Question

我是从一个网站开始为我的作品集开发一个类，我的标题图片是否超过了包装器？我似乎无法让它向左移动。（nameheader img）

我希望它与文档的宽度相同，宽度为1050像素。 This is what it keeps doing... that little gray square on the top right is where the wrapper starts

HTML：

<html>
  <head>
  <meta charset="UTF-8">
  <title>Sarah's Portfolio</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
</head>

<body>
    <div id="wrapper">

      <div id="header">
        <div id=nameheader">
          <img src="images/nameheader.png" alt="header" />
        </div>
      </div>

      <div id="nav">
        <a href="#"> HOME </a>
        <a href="#"> PORTFOLIO </a>
        <a href="#"> ABOUT</a>
        <a href="#"> CONTACT </a>
      </div>

      <div id="content">
      </div>

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

CSS：

@charset "UTF-8";
/* CSS Document */

body {
    background-color:#000000;
    margin:0;
    padding:0;
    font-family:Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 1050px;
    height: auto;
    margin:0 auto;
    background-color:#E4E5E6;

}

#header {
    width: 0px;
    height: 0px;
    background-color: #fff;
}

@font-face{ 
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}

#nav {
    width: 1050px;
    height: 54.5px;
    display: inline-block;
    text-align: center;
    background-color:#000000;
    font-family: 'MyWebFont', Arial, sans-serif; 
    font-size: 25px;
    margin-top: 10px;
}

#nav a {
    text-decoration:none;
    color:#FFFFFF;
    width: 20%;
    display: inline-block;
    text-align: center;
    margin-top: 13px
}

#nameheader img {
    width: 1050px;
    height: 485px;
    display: block;
}


#content {
    width:0px;
    height:auto;
}

Answer 1

您的div标签中缺少一个可能会破坏您网页页面的引号。

Answer 2

还需要更新图像的父容器的宽度/高度：

#header {
  width: 0px; <-- here
  height: 0px; <-- here
  background-color: #fff;
}

如果页面宽度发生变化，为了避免将来遇到麻烦，建议您更改为：

#nameheader img {
  width: 100%;
  height: 485px;
}

Answer 3

试试这个：

#nameheader img { max-width: 100%; height: 485px; display: block; }

您的包装器已经是1050px，因此无需再次为图像提供宽度。让它继承其父元素。

Answer 4

添加溢出：隐藏;到包含图像的div。

为什么我的图像会超出我的包装？

4 个答案: