html - 全屏背景图像停止纵向缩放

Question

我正在努力学习 RWD。

http://www.blinkbysecretlashes.co.uk/?ModPagespeed=off

这个客户持有的页面在横向上看起来还不错，但所有纵向版本都切掉了模特的脸，而不是按比例缩小图像。不幸的是， Logo 是主图像的一部分，我无法单独获取。

我不明白为什么图像在达到大约 800 像素宽之前似乎可以很好地缩放然后开始裁剪。我在(简单的)CSS 中看不到任何会导致这种情况的内容。除非是我还不完全理解的 Bootstrap ？

Answer 1

我查看了您的网站，看到了预期的行为。您告诉浏览器用背景图像覆盖所有可用空间。当浏览器无法再覆盖整个空间时，即它在一个维度上达到了极限，它别无选择，只能开始裁剪另一个维度以保持纵横比不变。毕竟，您不想扭曲这个模型的脸。

例如尝试替换

background-size: cover;

与

background-size: contain;
background-repeat: no-repeat;

你会明白我的意思的。

编辑:

如果你想使用相同的图像，试试这个:

background-position: center top;

现在您的图像也非常适合肖像。