如何在由8个不同的“棱镜”图像组成的全宽背景上保持100％的高度+宽高比

Question

I have 8 's / background images - each image has the exact same size and is positioned the same.

Each is defined with background-size: cover and background: top center fixed .

Fiddle here: http://jsfiddle.net/p19xu1er/

My issue is that I want to show all of the prism image and still keep aspect ratio in a full width solution, and currently I experience on a bigger screen/resolution that especially prism marked with "4" will have it's bottom "joint"/"angle" line appear off-screen.

If you resize the fiddle browser width to something high you can see this and if you re-size to something low you can see it appear.

I know this is because it's defined as background: top center fixed - however defining it to "bottom", will mis-align it.

Any suggestions on what I could do? I don't mind taking use of JS/Jquery if there's no other way.

Answer 1

If you don't mind the shape of the prisms being skewed when the screen resizes, you could do something like this instead:

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>

Cover is used when you're trying to completely fill in the background. It naturally hides excess. I tried using contain and that kept the proportions, but it didn't completely fill the screen's height. It would be hard to come up with a javascript solution because it's difficult to make changes based on the height/width of a background image.

I really hope this helps! You have a bit of a tricky situation on your hands.