Изображение полной ширины браузера

Question

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

код уже существующий на родительскую теме является:

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg"); 
background-repeat: no-repeat; 
background-position: center center; 
-webkit-background-size: cover; 
background-size: cover; 
position: relative; 
box-shadow: 0 7px 10px -10px #000; 
width: 100%; 
z-index: 0; 
height: 300px; 
margin-bottom: 80px; 

Существует также вторая таблица стилей на тему Thats используется и наследует большинство стилей родительских стилей, где изображение CSS на том, что таблица стилей:

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg"); 
width: 100%; 
height: 300px; 

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

Изображение соответствует оригинальному размеру (1369x325 пикселей) даже при изменении ширины на 100% и, следовательно, уменьшении части его на меньшем браузере.

Любая помощь, где я буду неправильно было бы здорово, сайт: http://biobreak.co.uk/test/services/

Спасибо.

Answer 1

Правило в первой таблице стилей фактически задает размер фонового изображения с помощью слово cover.

Параметр width: 100%; второго правила устанавливает только ширину окружающего элемента, а не только фоновое изображение (которое остается неизменным cover).

Таким образом, вы должны добавить

background-size: 100%; 

к этому второму правилу.

Answer 2

Двухсторонний, первый должен поместить изображение в relative DIV, а затем дать изображение следующее

img { 
    position: absolute; 
    width: 100%; 
} 

или просто использовать в vw блок

img { 
    width: 100vh; 
} 

если вы фоновое изображение просто используйте background-size: 100%;