html - 浏览器的图像全宽

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%;

第二条规则。