如何按照所需比例缩放背景图像，但无法进行缩放？

Question

我有一个问题。我正在使用html、css为我的作业制作网站。现在我想让标题栏高度为700像素，宽度为100%。同时，我希望一个相当大的图片（高度肯定超过2000像素）成为我的标题栏的背景图像。

现在我有这段代码：

header{width:100%;
background-image:url("url");
background-repeat:no-repeat;
background-position:top;
background-size:cover;
height:700px}

现在我想按照自己的需求对图像进行缩放，例如使用以下方式将整个图像适合700px高度和完整宽度吗？：

background-size: 100% 700px;

但是我不希望它拉伸得太严重，也许不需要让整个图片都适应，只需裁剪图像下方的一些像素即可，这样看起来就不会那么拉伸。

我希望你能理解我想要实现什么，对我的英语表示抱歉。

现在代码应该是什么样子的？我该如何实现这一点？特别是当我必须使用时

background-position:top;
background-size:cover;

（任务）

感谢您的阅读！

- Ovelion

---

请查看此链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images#tiling_a_large_image - fnostro

你有考虑过将大小设置为“包含”而不是“覆盖”吗？这将确保整个图片始终可见，尽管显然会在顶部和底部或侧面获得边距，具体取决于包含元素的宽高比与自然图像的宽高比之间的比较。 - A Haworth

Answer 1

header{
width:100%;
background-image:url("url");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
height:700px
}

这是最好的代码，适合于不同纵横比的图像。

你需要注意。编码并不能解决所有图片问题。你需要一张适合每个设备屏幕大小和纵横比的图片。在桌面上，你的纵横比与移动设备不同。为了确保图片完美，你应该先在Photoshop或其他程序中调整特定的图片大小，然后再插入到你的网站中。此外，在CSS中，你可以使用@media在不同的分辨率下放置不同的背景图片。

- Bogdan V

Answer 2

如果您需要在练习中使用background-size:cover;，那么这就是您的缩放比例。它将查看元素和图像的纵横比，然后始终按照保持其纵横比的一侧进行缩放，以确保其始终缩放到100%（否则它会拉伸图像）。

因此，如果它在宽屏幕上，则可能会缩放到100％的宽度，然后从底部裁剪像素。但是，如果您将浏览器调整为非常小的大小，则它可能会调整为高度的100％，并且会从侧面切掉像素（因为它将覆盖整个区域，但不会拉伸以适应它）。

- T-S