Issue
I'm struggling with what I thought would be simple image placement on a responsive website. We've only been using CSS but I'm wondering if Jquery might be required -- I'm hoping not.
We have multiple images aligned horizontally across a page using html/css. We're trying to make a unique responsive design that shows more images the wider the screen is.
The issue is that we want the most important images to always be closer to the center line of the screen with the least important ones being the furthest out. Right now when screen size reduces it only takes away images from the right side.
Is there a CSS/HTML method that will remove/add images to both sides equally?
I've been trying to come up with the best way to explain this but struggle. Old MS Paint mock up may help more.
We've tried CSS media queries but that doesn't keep the most important images exactly centered on the screen. We could go through every single popular screen resolution but I find it hard to believe that's the best way.
We also tried using a border-less table with media queries to hide (display:none) columns. This kinda worked on Chrome but less-so on Firefox.
Solution
It may not be a perfect solution, but this (in Chrome, at least) works for me. The images get chopped rather than disappear when they don't fit, so I'm not sure if that is enough for you.
The trick is to create a background container for a series of [image] columns, and make the container relative positioned. Then we give it a decent left and right offset to take it outside the page, ensuring there will always be enough room to centre the items inside properly. You may have to go wider if you have more images.
(Substitute your own image for gear_icon.png below.)
<!DOCTYPE html>
<html>
<head>
<title>Centering Image Columns Test</title>
<style>
div.container {
display: block ;
position: absolute ;
left: -500px ;
right: -500px ;
height: 600px ;
text-align: center ;
white-space: nowrap ;
overflow: hidden ;
background-color: #eeeeff ;
border: 1px solid black ;
}
div.image-column {
display: inline-block ;
vertical-align: middle ;
padding: 20px ;
background-color: #cccccc ;
}
</style>
</head>
<body>
<div class="container">
<div id="least-left" class="image-column">
<img src="gear_icon.png" width="96px" height="96px"><br>
<img src="gear_icon.png" width="96px" height="96px">
</div>
<div id="middle-left" class="image-column">
<img src="gear_icon.png" width="192px" height="192px">
</div>
<div id="most-middle" class="image-column">
<img src="gear_icon.png" width="384px" height="384px">
</div>
<div id="middle-right" class="image-column">
<img src="gear_icon.png" width="192px" height="192px">
</div>
<div id="least-right" class="image-column">
<img src="gear_icon.png" width="96px" height="96px"><br>
<img src="gear_icon.png" width="96px" height="96px">
</div>
</div>
</body>
</html>
Answered By - Nick Gris
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.