图片全宽浏览器

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 div中，然后给图片如下

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

或者只使用vw 单位

img {
  width: 100vh;
}

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