如何使背景图片完整显示

Question

我想要标题时有问题，在标题下有图像。 当图像宽度大于标题一时，将显示一个滚动条。 当您向右滚动时，标题中会有空白。 这里是示例问题。

问题是每个页面都有宽度不同的图像。 当我在页眉上使用最大图像宽度时，出现水平滚动。

Answer 1

如果我是您，il会将标头设置为固定大小或100％宽度，然后在图像上执行相同操作。

您还可以在图片上使用属性max-width，以使其大小不能超过100％：在您的小提琴示例中添加以下规则（在CSS中）：

img {
    max-width: 100%;
}

Answer 2

我不确定您的设置是否正确-但如果您能够调整CSS以便为每个页面创建规则-我会将图像作为背景添加到标题中。

 .header {
     background: url(example.jpg) no-repeat;
     background-size: cover;
   }

 .page-1 .header {
     background-image: url(example-1.jpg);
  }

  .page-2 .header {
     background-image: url(example-2.jpg);
   }

请参阅background-size属性上的此页面 。