Сделайте расширение <img>дальше тега <body>в css - PullRequest
Новая
       9

Сделайте расширение <img>дальше тега <body>в css

0 голосов
/ 22 июня 2010

Я пытаюсь разработать область заголовка, которая расширяется за пределы обычного контейнера шириной 960px, без использования фонового изображения, моя причина в том, что тег <img> будет работать лучше в моем случае.

Моя проблема в том, что, если я помещу свое изображение в контейнер, как, например, в следующем примере кода: 

<style>
   #container {
       width: 960px;
       margin: 0 auto;
   }
</style>
<div id="container">
  <img src="myimage.jpg" alt="my image" />
</div>

Я хочу иметь возможность поместить это изображение в центр по всей странице, расширяя его контейнердо конца окна просмотра, без добавления полос прокрутки, предположим, что размер изображения остается на постоянной ширине 1280 пикселей, но высота варьируется.

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

Я надеюсь, что вы, ребята, можете помочь)

Ответы [ 3 ]

2 голосов
/ 22 июня 2010

Вы правы, это не работает.Почему он должен быть внутри контейнера?

Вы можете сделать это так. 

<html>
<head>
<style>  
html, body{ 
width: 100%; 
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
} 
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%; 
height: 100%;
}
</style>  
 </head>
<body>
    <div id="page"> 
    <div id="header"> 
      <img src="myimage.jpg" alt="my image" />  
    </div> 
<div id="container">  
</div>
    </div>
</body> 
</html>
1 голос
/ 22 июня 2010

Моя мысль похожа на мысль Лукаса.Извлеките контейнер и поместите его в собственный контейнер (например, id = "header").Установите для #header width: 100% (которая должна быть шириной области просмотра, а переполнение: скрыто. Затем установите #header как вам нужно - при необходимости используйте предложение Зуула об абсолютном позиционировании. 

...
<style type="text/css">
#header { width: 100%; overflow: hidden; margin: 0; }
</style>
...
<div id="header">
    <img src="myimage.jpg" alt="My Image" />
</div>
...

Iдумаю, что это должно сработать для вас.

1 голос
/ 22 июня 2010

Если img нужно разместить точно в x-pos: 0 и Y-pos: 0, вы можете использовать position: absolute для его размещения: 

img#my_header{

 position:absolute; // Tell the browser to break document work flow for this ID

 z-index:1; // Tell the browser to pull up in the stack this ID by 1

 top:0; // tell the browser to place this ID at 0px from top of view port

 left:0; // tell the browser to place this ID at 0px from left of view port

}

Это пример, чтобы датьу вас есть идея, с помощью которой можно разбить рабочий процесс документа, чтобы установить тег img в нужное место ... корректируя верхнюю и левую координаты, вы должны решить это!

Надеюсь, это поможет!

...