浏览器的图像全宽

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; 

还有对主题的第二样式表多数民众赞成使用和继承了大部分从父样式表，其中对图像CSS样式样式表是：

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

我不知道为什么标题图像具有两个样式两个CSS代码，但多数民众赞成主题来时的路，而我不是这样的专家，所以，可能是正常的。

即使将宽度更改为100％，图像仍保留原始尺寸（1369x325px），因此在较小的浏览器上将其部分剪掉。

任何帮助，我要去哪里错将是巨大的，网站地址：http://biobreak.co.uk/test/services/

感谢。

Answer 1

第一个样式表中的规则实际上设置了背景图片的大小字cover。

第二条规则的width: 100%;设置仅设置周围元素的宽度，而不是背景图像本身（其保持不变cover）。

所以，你必须

background-size: 100%; 

添加到第二条规则。

Answer 2

两个方式，第一种是把图像中的relative格，然后给图像以下

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

或只使用vw单元

img { 
    width: 100vh; 
} 

如果你仅使用背景图片background-size: 100%;