Question

我拉着头发学习RWD。

此客户持有页面在横向上看起来不错，但所有肖像版本都会切断模型面，而不是缩小图像。不幸的是，徽标是主要图像的一部分，我无法单独获取。

我不明白为什么图像看起来很好地缩放，直到它达到大约800像素宽然后开始裁剪。我无法在（简单的）CSS中看到任何会导致此问题的内容。除非是引导程序，我还不完全理解吗？

Answer 1

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

例如，尝试替换

background-size: cover;

与

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

你会看到我的意思。

编辑：

如果您想使用相同的图片，请尝试以下操作：

background-position: center top;

现在你的形象对肖像也很有效。