Html 图像浏览器的全宽

我在创建的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），因此在较小的浏览器上删除了部分图像

在我出错的地方提供任何帮助都会很好，网址：

---

谢谢

两种方法，第一种方法是将图像放入一个

相对的
div中，然后给出以下图像

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

或者只使用
vw
装置

img {
  width: 100vh;
}

如果你是背景图像，只需使用
背景大小：100%
第一个样式表中的规则实际上使用单词
cover
设置背景图像的大小

第二条规则的
宽度：100%设置仅设置周围元素的宽度，而不是背景图像本身（保持不变
封面
）

所以你必须加上

background-size: 100%;

第二条规则。
谢谢你，我试试看