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

有点奇怪的标题，但想不到更好的方式来说出它。基本上我正在一个网站上工作，并且我想使用我在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中的图像？谢谢你的建议。

来源

2017-06-15 Rawrplus

如果可以的话，创建的jsfiddle工作版本：https://jsfiddle.net/ –

你尝试：

background-size: (100% 100%);

来源

2017-06-15 11:28:10 viCky

将有同样的效果，第一形象，但倒挂（基本上是底部部分具有适当的配合，但顶部将被裁剪） – Rawrplus

它不应该以这种方式发生。它应该给你想要的结果。你可以请张贴HTML元素的元素。 – viCky

如果它已解决您的问题，请点击此帖子左侧的勾号，以便大家可以知道您已找到您的解决方案。谢谢。 – viCky

尝试使用视口，得到按照屏幕的宽度（100vw = 100％浏览器的宽度）的元件宽度。

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

来源

2017-06-15 11:31:33

几乎但不是很完美，由于某种原因没有涵盖整个屏幕宽度，下面是它的结局：http：/ /imgur.com/QpL53ex – Rawrplus

您需要调整图像的大小等于元素的大小......！

，然后使用：

background-size: 100% 100%;

来源

2017-06-15 11:40:32

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

回答

相关问题