浏览器

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％，图像也会粘贴到原始尺寸（1369x325像素），因此在较小的浏览器上将其中一部分剪切掉。

我出错的任何帮助都很棒，网址：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%;