Question

我有一个图像作为标题，在css中我将宽度设置为“100％”，但它没有完整的方式所以我尝试了“190％”，它只延伸到了右边的页。然后我继续将高度更改为％，因为它在px中，我希望它以％为单位使其看起来整洁，因为宽度为％，但随后他的图像消失了。

加上我甚至无法改变图像的位置。

这是我的问题：http（分号）// prntscr.com/3ufy00

这是我的代码：

CSS

body { }

#image {
width:100%;
height:178px;
}

HTML

<div class="wrapper">

  <header id="menu">
<img id="image" src="http(semi)//oi62.tinypic.com/6t3fp2.jpg">
  </header>

</div>

Answer 1

检查这个

add 

html,body {
    margin:0;
    padding:0;
    }

http://jsfiddle.net/5r6ht/

Answer 2

你有一个reset.css吗？身体{margin：0; padding：0}尝试将img高度设置为auto。

Answer 3

<div class="wrapper">

  <header id="menu">
<img id="image" src="http(semi)//oi62.tinypic.com/6t3fp2.jpg" height="100">
  </header>

</div>

您也可以尝试这样做。

Answer 4

如果您的包装器有限制，那么任何全宽度元素都需要在它之外

<强> HTML

<header id="menu">
    <img id="image" src="http://oi62.tinypic.com/6t3fp2.jpg" />
</header>
<div class="wrapper"></div>

<强> CSS

* {
    margin: 0;
    padding: 0;
}
#image {
    display: block;
}
.wrapper {
    max-width:80%;
    margin:0 auto;
    /* centered */
    height: 150px;
    /* just for show */
    background-color: gold;
}

<强> JSfiddle Demo

标题不会延伸到整页宽度

4 个答案: