图像浏览器的全宽

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

两种方式，第一种是将图像放在一个relativediv中，然后给图像如下

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

或仅使用vw单元

img {
  width: 100vh;
}

如果您是背景图像，请使用background-size: 100%;