Question

我只想在顶部创建带标题和按钮的图像。

文本和按钮应位于具有设置宽度的容器中。我只是想知道最好的方法是什么。

有很多方法让你在互联网上迷惑，我不知道哪一个是最好的！

Answer 1

如果背景图像的宽高比始终相同，则可以使容器的高度与背景图像的宽度成比例。

假设你的背景图片是2000 x 1000像素。我们说屏幕目前是800px宽。然后，您希望具有背景图像的容器高400像素。要在不设置硬编码断点的情况下实现此目的，可以使用“填充技巧”。如果以百分比形式设置子元素的填充（顶部或底部），则会将高度计算为父元素宽度的百分比。因此，如果将容器的padding-top设置为50％，它将是父元素宽度的一半。所以在2000 x 1000 px的情况下：1000/2000 * 100 = 50％。

.parent_w_bg {
   background-image: url(...);
   width: 100%;
}
.container {
   width: 500px;
   margin: 0 auto;
   padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}

<div class="parent_w_bg">
   <div class="container">
     Header and button etc.
   </div>
</div>

在这种情况下，您应该将容器放在相对位置，并且它的子容量是绝对的，例如带顶部值的标题和带底值的按钮。

这是一个简单的小提琴：https://jsfiddle.net/mmcc5rnk/

对不同的断点使用多个图像大小可能很有用，但也存在问题。取决于您的具体情况，图像的大小以及您要使用的断点数量（以及差异）。根据某些指定的断点使用不同的图像很好，无论实现如何都可以使用。

Answer 2

除非在项目要求中指定，否则设置整个部分的高度绝不是一个好主意。始终依赖内部内容来垂直拉伸您的部分。

关于背景 - 如果您使用多个图像，则可以在一个常用背景设置中为它们应用不同的大小和位置，以便在视口调整大小时可以缩放重新排列，或者如果您有一个大图像，你可以简单地将图像背景大小设置为cover，如下所示：

background: url('images/image.jpg') no-repeat center center/cover;

有很多方法可以实现您的目标，但最新的做法是使用 Flexbox model.

所有flexbox属性都必须加上前缀，因此它们可以在所有浏览器中使用。

解释Flex的工作方式过于宽泛，无法回答，因此您必须从头开始学习。

这是代表您目标的 Fiddle 。

Answer 3

No need to add different images for each breakpoint, 
image will resize automatically, you can add dynamic height by using jQuery

Demo here

横幅和标题

3 个答案: