html - 使背景图像正确适合宽屏

Question

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

它非常适合元素的 100% 宽度，但如您所见，图像被裁剪了，因为它不是我想要的 100 像素。

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

如您所见，这看起来很奇怪。最后但同样重要的是，我尝试使用 50% 50% 技巧 - background-position: 50% 50%;背景尺寸:封面； background-repeat: no-repeat;，哪种方法有效，但我仍然有一个问题，它不适合垂直(边缘被切断)，正如你在这里看到的:

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

Answer 1

你试过吗:

background-size: (100% 100%);