Css 横幅和标题

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

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

---

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

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

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

.parent\u w\u bg{
背景图片：url（…）；
宽度：100%；
}
.集装箱{
宽度：500px；
保证金：0自动；
填充顶部：50%；//假设背景图像的纵横比为1:2
}
标题和按钮等。

在这种情况下，您应该相对地定位容器，并且它的子容器是绝对的，例如，具有顶部值的标题和具有底部值的按钮

这里有一把简单的小提琴：

---

为不同的断点使用多个图像大小可能很有用，但也有问题。取决于您的具体情况、映像的大小和要使用的断点的数量（以及差异）。根据某些指定的断点使用不同的映像是可以的，并且可以在不考虑实现的情况下使用

除非项目要求中有规定，否则为整个截面设置高度从来都不是一个好主意。始终依靠内部内容垂直拉伸节

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

cover

，如下所示：

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

实现目标的方法有很多，但最新的方法是使用

所有flexbox属性都必须加前缀，以便它们可以在所有浏览器中工作

解释Flex如何工作对于回答来说太宽泛了，所以你必须从头开始学习

这是一个代表你目标的

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

---

您的解决方案将为您提供一个很好的答案，如果您还没有看到答案，请浏览一下，这可能会对我们有所帮助。如果你能提供一个简单的例子，它可能也很有用。