Question

我想要一个标题时遇到问题，在它下面有一个图像。当图像宽度大于标题宽度时，会出现滚动条。向右滚动时，标题中有空格。 here示例问题。

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

Answer 1

如果我是你，我会把标题放在固定尺寸或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);
   }

See this page on the background-size property

如何使背景图像完整出现

2 个答案: