如何制作响应式横幅？

Question

如何制作具有绝对位置的图像和文本层的响应式图像横幅？当屏幕变小时，我的客户希望横幅以及分层的文本和图像按比例缩小（请参阅下面的屏幕截图）。我不是在寻找滑块，这只是一个带有图层的简单横幅。我的客户在每个页面上都有不同的横幅（带有图层），他们的网站过去没有响应，现在他们想让它响应。 CSS 媒体查询在这里可能不起作用，因为我必须为屏幕上的每个像素更改定义新的字体大小和图像宽度，我认为这很耗时。

如您所见，随着屏幕变小，横幅以及分层的文本和图像会缩小

链接到我的小提琴：https://jsfiddle.net/ophLk9pz/1/

HTML：

<div class = "banner">
    <img src = "http://i.imgur.com/yfGOPkH.jpg" />
    <img src = "http://www.dummymag.com//media/img/dummy-logo.png" class = "layer-image">
    <h1>Sample Banner Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

CSS：

.banner { width: 1440px; position: relative; }
.banner img { z-index: -1; }
.banner h1 {position: absolute; bottom: 30px; left: 10px; }
.banner p {position: absolute; top: 150px; left: 10px; }
.banner .layer-image { position: absolute; top: 0; left: 150px; z-index: 2; }

任何帮助或想法将不胜感激，在此先感谢！

Answer 1

您可以尝试在文本上使用视口百分比单位：

https://drafts.csswg.org/css-values/#viewport-relative-lengths

h1 { font-size: 8vw }

图像可以像这样缩放：

img {
   height: auto;
   width:100%;
}

如果您需要更高级的缩放方法（包含、覆盖等），我相信您需要将图像作为背景图像