如何通過響應式“放大”您的圖像

Question

我有一個 3000x275 像素的圖像，我想在 3000 個寬屏幕（幾乎沒有）上完整顯示，並在屏幕變小時放大到中間。 所以 320 的屏幕只能看到橫幅的中間 320 像素。

我嘗試了很多方法，但我一生都無法弄清楚完成這項工作。 請注意，我使用 slick-slider 來滑動圖像，所以不確定解決方案是在這個 class 還是 css 中。

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>