谁能告诉我这个效果是怎么实现的？

Question

所以在这个网站中： https://www.sohofarmhouse.com/hotel/farmyard-up

当屏幕尺寸改变时，背景图片会自动调整大小，但纵横比始终保持不变。

我猜这与 div 中的 div 有关，但请有人帮我分解一下，因为我希望能够在我的自己的网站。

非常感谢。

Answer 1

好吧，至少有两种方法可以达到这个结果。您可以根据浏览器的兼容性选择其中之一。

1) 您可以选择纯 css 解决方案，使用 div 背景图片和设置：

background-size: cover;

如果 IE8 是您的目标浏览器之一，则不能使用此方法。

2) 您可以使用 javascript 库。我经常使用一个名为 jquery Backstretch 的库。它非常易于使用。