How to make images line up in a row regardless of browser zoom level?
Solution 1
try wrapping the images in a container div width 100%, with overflow: hidden;
this will stop a scroll bar appearing - Then set the white-space
property of the container div to nowrap
this should force the images to stay on one line but the overflow outside your container area will be hidden allowing you to script the change to the left/right offset or margin - you can make the images display inline, or inline-block
Nate that if there is also caption text along with these images the white-space property will also affect the text in the captions so you may need to reset any captions to white-space: normal
sample CSS:
#container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}
#container img {display: inline-block; margin: 0 100px;}
HTML:
<div id="container">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
<img src="http://placekitten.com/300/300/">
</div>
Solution 2
try creating a container div around the images with fixed width, i.e.: in px
<html>
<head>
<title></title>
<style type="text/css">
#container { width:1100px; }
img { width:200px; height:100px; margin: 0 10px; float:left; }
</style>
</head>
<body>
<div id="container">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
user701510
Updated on June 24, 2020Comments
-
user701510 almost 4 years
It seems that no matter what I do, I can't get a row of images to line up horizontally when I zoom into the browser. When I zoom in, the images furthest to the right will drop down to the next row instead of going off screen. I've tried
float:left;
, creating a border, andposition:relative;
but no luck.If I use
position:absolute;
it seems like I have to manually position each image.My goal is make a sliding image gallery using jquery like the one here: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/
I don't want to copy the code in the link above, because I want to create everything from scratch by understanding the fundamental building blocks.