Looking to showcase multiple images on a single line with specific height requirements and a nice reflection effect? Here's how I achieved it:
All images must fit in height.
They should be lined up in a row, cropping width if needed.
A reflection effect would be a great addition.
I initially used background-image and structured it as follows:
<!-- Row of Images -->
<div class="row-fluid">
<div class="span12" id="cover_pictures">
<div class="images1">
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div> </div>
</div>
<!-- Row for Reflections (generated by PHP) -->
<div class="row-fluid">
<div class="span12 hidden-phone" id="cover_reflections">
<div class="images1">
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
This setup includes the following CSS styles:
#cover_pictures .images1 {
height:350px;
}
#cover_reflections .images1 {
height:100px;
}
.images1 {
width:100%;
}
.images2 {
background-position:center top;
background-repeat:no-repeat;
background-size:auto 100%;
float:left;
height:100%;
overflow: hidden;
margin:0px 0%;
}
To resize the .images2 divs, I used this JavaScript code:
var l = dataJson.length; // number of images
var margTot = 5; // 5% of the space for margins
$(".images2").css("margin-left", margTot / 2 / l + "%");
$(".images2").css("margin-right", margTot / 2 / l + "%");
$(".images2").css("width", (100 - margTot)/l + "%");
The issue arose when loading reflections from PHP proved slow and inefficient. To address this, I turned to Reflection.js which works well with <img> elements but not with background-image. The challenge now is maintaining the layout while using <img> elements, without distortion or fitting issues.
Though I'm not an expert in HTML/CSS, any guidance or solution would be highly appreciated! Feel free to ask for more details if needed.
If I manage to solve this effectively, I intend to share it as a jQuery plugin on GitHub.
Note: The image list is fetched through a JSON API, providing URLs and sizes dynamically. Server-side resizing isn't feasible due to varying image quantities per page.
Update: I've acknowledged two helpful answers on this issue by awarding the bounty to Troy Alfrod for a detailed response and validating Vals' solution for its simplicity.
In my case, I opted for the straightforward approach that involved:
Using identical
background-imagedivs within both#cover_pictures > .images2and#cover_reflections > .images2.Adding
transform: scaleY(-1);to#cover_reflections > .images2for the reflection effect.Setting the size constraint of
#cover_reflectionsto 100px.Implementing the suggested
.maskdiv.
This method worked efficiently, except for compatibility issues with IE7-8 due to lack of support for background-size. As a workaround, I integrated a PHP backend to ensure proper image heights based on client-side needs.
Hopefully, this experience proves beneficial to others facing similar challenges!
Stay tuned for updates on the upcoming jQuery plugin link.