Заголовок не будет растягиваться на всю ширину страницы

#html #css

#HTML #css

Вопрос:

У меня есть изображение в качестве заголовка, и в 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>

1. Ну, 100% означает, что он заполняет своего родителя, поэтому, если ваша оболочка имеет какие-либо ограничения по размеру, она будет заполнять только этот размер. Посмотрите, как это выглядит на JSFiddle . Кажется, все в порядке только с тем кодом, который вы предоставили.

Ответ №1:

проверьте это

 add 

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

http://jsfiddle.net/5r6ht/

1. Если скопировать код из скрипки, я уверен, что ваш css в вашем ответе не будет работать

2. объясните, пожалуйста, и вы проверили скрипку

3. Я уверен, что скрипка работает, но css в вашем ответе недействителен из-за опечатки o вместо 0

Ответ №2:

У вас есть reset.css? body {margin:0; padding:0} попробуйте также установить для высоты img значение auto .

Ответ №3:

 <div class="wrapper">

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

</div>

Вы также можете попробовать это.

Ответ №4:

Если ваша оболочка имеет ограничение with, то любые элементы полной ширины должны находиться за ее пределами

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