javascript - 如何通过响应式“放大”图像

Question

我有一个 3000x275 像素的图像，我想在 3000 个宽屏幕（几乎没有）上完整显示，并在屏幕变小时放大到中间。所以 320 的屏幕只能看到横幅的中间 320 像素。

我尝试了很多方法，但我一生都无法弄清楚完成这项工作。注意，我正在使用 slick-slider 来滑动图像，所以不确定解决方案是在这个类中还是在 css 中。

标签： javascriptjquerycss

Answer 1

这可以很容易地实现，如下所示：

header {
 width: 100%;
 height: 275px;
 background-image: url('https://i.imgur.com/vimIKDj.png');
 background-size: 3000px 275px;
 background-position: center;
 text-align: center;
 color: white;
}

<header>Your header</header>