我有 8 张/背景图片 - 每张图片的大小和位置都完全相同。
每个都用 background-size: cover
和 background: top center fixed
定义。
在这里 fiddle : http://jsfiddle.net/p19xu1er/
我的问题是我想显示所有棱镜图像并在全宽解决方案中仍然保持纵横比,目前我在更大的屏幕/分辨率上体验,尤其是标有“4”的棱镜会有它的底部“关节”/“Angular ”线出现在屏幕外。
如果将 fiddle 浏览器的宽度调整到较高的值,您可以看到它;如果将其调整到较低的值,您可以看到它出现。
我知道这是因为它被定义为 background: top center fixed
- 但是将它定义为“bottom”,将会错位。
对我可以做什么有什么建议吗?如果没有其他办法,我不介意使用 JS/Jquery。
最佳答案
如果您不介意屏幕调整大小时棱镜的形状发生倾斜,您可以改为执行以下操作:
CSS:
div {
position: absolute;
top: 0;
left: 0;
}
div img {
width: 100%;
height: 100%
}
HTML:
<div id="p1"><img src="http://i.imgur.com/Q8G7qJl.png"></div>
<div id="p2"><img src="http://i.imgur.com/KWi4kKy.png"></div>
<div id="p3"><img src="http://i.imgur.com/8bEneh3.png"></div>
<div id="p4"><img src="http://i.imgur.com/Dj47i8e.png"></div>
<div id="p5"><img src="http://i.imgur.com/BqEIfYC.png"></div>
<div id="p6"><img src="http://i.imgur.com/572QfZm.png"></div>
<div id="p7"><img src="http://i.imgur.com/ZxEhjkO.png"></div>
<div id="p8"><img src="http://i.imgur.com/vYvYnjq.png"></div>
当您试图完全填充背景时使用封面。它自然会隐藏多余的东西。我尝试使用 contain 并保持比例,但它并没有完全填满屏幕的高度。很难想出一个 javascript 解决方案,因为很难根据背景图像的高度/宽度进行更改。
我真的希望这对您有所帮助!你手上的情况有点棘手。
关于javascript - 如何在由 8 个不同的 "prism"图像组成的全宽背景上保持 100% 高度 + 纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26442009/