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

我正在努力学习RWD

这个页面在横向视图中看起来不错，但是所有的肖像版本都会切掉模特的脸，而不是缩小图像的比例。不幸的是，徽标是主图像的一部分，我无法单独获取它

---

我不明白为什么图像看起来缩放得很好，直到它达到大约800像素宽，然后开始裁剪。我在（简单的）CSS中看不到任何会导致这种情况的东西。除非bootstrap做了什么我还不完全理解的事情？

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

例如，尝试替换

background-size: cover;

与

你会明白我的意思

编辑：

如果要使用相同的图像，请尝试以下操作：

background-position: center top;

---

现在，您的图像对纵向效果也很好。

请尝试“中上”而不是“左上”。这就是你想要的吗？谢谢比利-我试过了，我认为它仍然会在视口大小小于800像素时开始裁剪。真烦人，谢谢你，安德烈。我想我现在正在思考：）这是一个很好的方法，因此可以有更小的图像或“肖像友好”的图像，我切换到更小的视口大小吗？谢谢Andrei，我这样做了，并更改了背景大小，以包含在肖像大小上，并且看起来很好（最后！）

background-position: center top;