横幅和标题答案

【问题标题】：Banner and heading横幅和标题
【发布时间】：2017-01-27 11:46:46
【问题描述】：

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

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

有很多方法让你在互联网上感到困惑，我不知道哪一种最好！

【问题讨论】：

您的解决方案jsfiddle.net/bhushanwagh/xr1L5yob
为了给您一个很好的答案，如果您还没有看过How to Ask，它可能会对我们有所帮助。如果您可以提供minimal reproducible example，它可能也很有用。

标签： css image banner

【解决方案1】：

如果您的背景图片始终具有相同的纵横比，您可以使容器的高度与背景图片的宽度成比例。

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

为不同的断点使用多种图像大小可能很有用，但也有问题。取决于您的具体情况、图像的大小和要使用的断点数量（以及差异）。根据一些指定的断点使用不同的图像是可以的，并且无论实现如何都可以使用。

【讨论】：

【解决方案2】：

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

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

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

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

所有的 flexbox 属性都必须有前缀，这样它们才能在所有浏览器上工作。

解释 Flex 的工作原理过于宽泛，无法找到答案，因此您必须从头开始学习。

这是一个代表你的目标的Fiddle。

【讨论】：

【解决方案3】：

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

Demo here

【讨论】：