2013-10-09 2 views
0

Привет, Я хотел бы получить целое изображение в ширину браузера в качестве заголовка. Но дело в том, что я получаю горизонтальную полосу прокрутки, и я не хочу этого. Я хочу, чтобы изображение регулировалось, если браузер также настраивается. Возможно ли это с помощью css? Извините за мой плохой английский. Это мой кодЯ хотел бы получить целое изображение в качестве заголовка

#header { 
     Margin-left:auto; 
     Margin-right:auto; 
     heigth:400px; 
     position: center center;  
     min-width: 100%; 
     max-width: 1024; 
} 

    <body> 
     <div id="header"> 
      <img src="header.png" /> 
     </div> 
+0

Вам нужно будет опубликовать более подходящий HTML/CSS, демонстрирующий проблему, или предоставить живой пример. –

+0

есть несколько способов добиться этого результата полного изображения ширины страницы без горизонтальных полос прокрутки. один метод, который я часто использую, объединяет css, чтобы установить размер изображения в ширину: 100%; высота: авто; на изображении. если его родительский контейнер имеет полную ширину браузера; изображение будет регулироваться по мере изменения размера порта просмотра – Joe

ответ

0

Вы можете выбрать, чтобы установить изображение в качестве фона и использовать размер фона: обложка; как это:

#header { 
    width: 100%; height 400px; 
    margin: 0 auto; 
    background: url("../header.png"); 
    background-size: cover; 
} 

<div id="header"></div> 

Вы можете найти более подробное объяснение о фоне размере здесь: http://www.css3.info/preview/background-size/

0

Попробуйте.

#header { 
    max-width: 100%; 
    background:#ffffff url("header.png") repeat-x; 
} 
0

Вы можете искать фон обложку:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Использование метода сопроводительного будут масштабировать изображения для заполнения контейнера.

0

Вы можете установить #header img { max-width: 100%; }

0

Хм, если я сделать фоновое изображение, само изображение не отображается. Возможно, beacause его 1400px в ширину, может css обрезать это для каждой разной ширины браузера без любой горизонтальной полосы прокрутки.