将背景图像正确地适合宽屏

Question

有点奇怪的标题，但想不出更好的方法来说出来。 基本上我正在一个网站上工作，我想使用我在photoshop中制作的资产，用于看起来像皮革手提箱/皮带背景的导航栏。问题是，如果我拉得太远，它就不适合屏幕。基本上，如果我使用CSS background-size: cover; background-repeat: no-repeat;属性，它看起来像这个

它非常适合元素的100％宽度，但正如您所看到的，图像被剪裁，因为它不像我想要的那样是100px。

如果我使用background-size: contain; background-repeat: repeat-x;属性，我的图像在高度方面显然非常适合，但由于它不是无缝纹理，因此它不会在水平方向上正确剪裁。如下图所示：

你看，这看起来很奇怪。最后但并非最不重要的是我尝试使用50％50％的技巧 - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;，这种方法有效，但我仍然有一个问题，它没有垂直拟合（边缘被切断），你可以在这里看到：

所以我想问是否有办法使用我缺少的CSS正确地拟合图像。或者我使用repeat-x发布的第二张图片，但是如果有一种方法可以检查（可能是javascript / jquery），一旦图像不适合（ala第二张图像），它需要用scaleX水平翻转边缘适合，或者我应该简单地缩小Photoshop中的图像？谢谢你的建议。

Answer 1

你试过了吗？

background-size: (100% 100%);

Answer 2

尝试使用视口根据屏幕宽度（100vw = 100％浏览器宽度）给出元素宽度。

.nav-belt {
    width: 100vw;
    height: 100%;
}