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

Я продолжаю практиковать с помощью HTML и CSS. Я пытаюсь сделать изображение шириной страницы, расположенной по центру заголовка. По какой-то причине он не будет работать, когда я попробую варианты по его растяжению. Я предполагаю, что есть вариант, который мне еще предстоит найти.Заголовок Заголовок не будет содержать ширину страницы

CSS

#header { 

height: 80px; 
background-color: gray; 
margin-bottom: 60px; 


} 

.container { 

} 

.MainImage { 

background-image:url(computers.jpg); 
height: 400px; 
background-repeat: no-repeat; 
width: 100%; 

} 

.MainImage img { 

position: relative; 
background-size: cover; 

}

HTML

<body> 

<div id = "header"> 
<div class = "nav"> 

    <!-- container-fluid gives full width container of whole viewport --> 

    <div class = "container-fluid"> 


    <ul id = "nav" class= "text-left"> 
     <li><a href = "#"><strong>Home</a></li> 
     <li><a href = "#">Technologies</a></li> 
     <li><a href = "#">Programs</a></li> 
     <li><a href = "#">Blog</strong></a></li> 
    </ul> 

    <ul id = "nav" class = "text-right"> 
     <li><a href = "#"><strong>Sign Up</a></li> 
     <li><a href = "#">Sign In</a></li> 
     <li><a href = "#">Contact</strong></a></li> 
    </ul> 

    </div><!-- end container-fluid--> 
</div><!--end nav--> 
</div> <!-- end header --> 



<div id = "Main"> 


    <div class = "MainImage"> 


    </div> 


</div><!--end Main--> 



</body>

http://jsfiddle.net/xehu1tg0/

UPDATE: моя ошибка изображения IE 10

enter image description here

источник

2015-01-05 narue1992

попробовать с помощью CSS для центрирования изображения первого 'выравнивания текста: центр;', то вы можете увеличить ширину до 100%. Я также вижу, что вы используете его в качестве фонового изображения, попробуйте добавить 'background-size: cover;' в правило CSS для изображения – Lee

Используйте 'background-size: 100% 100%' -----> [Fiddle ] (http://jsfiddle.net/xehu1tg0/3/). –

Вам нужно добавить background-size: 100% auto; к вашему .MainImage классу, например, так: только

.MainImage { 
    background-image:url(http://www.onlineuniversities.com/wp-content/uploads/improving-tech-literacy.jpg); 
    height: 500px; 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    width: 100%; 
}

В height и width свойства влияют на элемент контейнера, а не фоновое изображение.

100% auto по существу означает, что размер изображения должен быть на 100% шириной его контейнера, а высота должна автоматически масштабироваться по ширине (там, где вы видите два значения, подобные этому, первый почти всегда относится к оси x, а второй по отношению к оси y.)

Надеюсь, это имеет смысл?

Пример: http://jsfiddle.net/w1020vu1/

источник

2015-01-05 14:09:39 Sean

Это сработало, но еще раз мой IE 10 не принимает его, только Google Chrome. – narue1992

Что вы видите в IE 10? Я не знаю какой-либо очевидной причины, почему это не должно работать в IE 10, поскольку оно поддерживает свойство 'background-size' (http: // caniuse.com/# search = background-size) – Sean

Вы пытались проверить код с помощью IE10? Означает ли это свойство 'background-size' в инструментах разработчика? – Sean

Во-первых, поскольку вы назначаете изображение с помощью свойства CSS background-image вместо элемента img с свойством src, ваш селектор ничего не делает.

Что касается .MainImage, стили, свойства height и width влияют только на элемент контейнера, а не на фоновое изображение. Для того, чтобы установить размер фонового изображения, использовать этот стиль:

.MainImage { 
    background-size: 100% auto; 
}

источник

2015-01-05 14:08:55 im1dermike

Хорошо спасибо за это. Я понял, что Google принял этот формат, но мой IE 10 этого не делает. Можете ли вы объяснить, почему? @ im1dermike – narue1992

@AlyssaCooke: Он отлично работает для меня в IE10. Повторите проверку кода. – im1dermike

В дополнении к ответам, я решил, что совместимость для моего IE может быть проблемой.

< В голове> Я занесен следующий код:

<meta http-equiv="X-UA-Compatible" content="IE=80" />

источник

2015-01-05 15:10:18 narue1992

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

ответ

Смежные вопросы