delma delma - 1 year ago 56
HTML Question

CSS for horizontal list of image to fit browser window width

I am having trouble with my horizontal list of images fitting browser window, mainly the width attribute. Currently, they fit full browser widow height and scale as window is resized, which is what I want. But the width will change depending on widow size; if too big they wrap as if text in a paragraph; if too small there is a ridiculous amount of white space at the end of the container. Note, I am a photographer that manages my own site, from design to updating, not a programmer.

Link here to actual gallery of my images for my site, resize you browser window to see what I am having trouble with:

Is there css coding that can allow the width to function as the height, to fit the browser window when resized, but be the actual width of the container and not cause white/negative space or wrapping? I am assuming styling the container div?

Thanks for any help in advance!

My code:

body {
margin: 0;
padding: 0;
#container {
position: absolute;
#images_hz {
width: 12584px;
border: 0;
padding: 0;
overflow: hidden;
#images_hz img {
height: 100vh;
display: inline;
float: left;
img {
pointer-events: none;

<div class="container" />
<div id="images_hz">
<img src="fashionb&w/1Ashten_7.jpg" />
<img src="fashionb&w/2Ashten_13.jpg" />
<img src="fashionb&w/3Ashten_6.jpg" />
<img src="fashionb&w/4blacktank3.jpg" />
<img src="fashionb&w/5blacktank2.jpg" />
<img src="fashionb&w/6blacktank1.jpg" />
<img src="fashionb&w/7blacktank5.jpg" />
<img src="fashionb&w/8blacktank4.jpg" />
<img src="fashionb&w/9katelyn1.jpg" />
<img src="fashionb&w/10katelyn2.jpg" />
<img src="fashionb&w/11jillian2.jpg" />
<img src="fashionb&w/12jillian1.jpg" />
<img src="fashionb&w/13jenny6.jpg" />
<img src="fashionb&w/14anger4.jpg" />
<img src="fashionb&w/15anger3.jpg" />
<img src="fashionb&w/16ona.jpg" />

Answer Source

Change #images_hz and #images_hz img to the following:

#images_hz {
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;

#images_hz img {
    height: 100vh;
    display: inline-block;
    margin-right: -4px /* one possible hack to use if you want no white space between inline block elements */

The major changes include setting the appropriate x and y overflows on the container, in addition to setting a height. Also, eliminating float and changing display to inline-block on the images themselves. Note that I used a fix to eliminate the whitespace between images to keep consistent with current design. For other alternatives, see