Dan Cundy Dan Cundy - 2 months ago 6
CSS Question

Slider with fixed height and variable width images

I'm trying to create a slider with fixed height and variable width images. I need the slider to be 100% width of the page, and be responsive to the browser viewport.

I would prefer not to use JS.

HTML

<div id="photoframeContainer">
<div id="photoframe">
<div class="imageContainer"><img id="theImage" src="uploads/picture02.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture03.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture04.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture05.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture06.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture07.jpg" alt=""></div>
<div class="imageContainer"><img id="theImage" src="uploads/picture08.jpg" alt=""></div>
</div>
</div>


Fiddle of failed previous attempt

fiddle

This is a fiddle of a previous attempt to achieve what I want, however the page isn't responsive as when the browser is resized, the images overlap and behave not as intended.

Answer

You can achieve your layout by simplifying the HTML (BTW ids must be unique so you shouldn't use the sane id on all the images) :

DEMO

<div id="photoframe">
    <img class="test" src="" alt="" />
    <img class="test" src="" alt="" />
    ...
</div>

CSS :

body, html {
    height:100%;
    margin:0;
}

#photoframe {
    white-space:nowrap;
    height:50%;
}
img {
    height:100%;
    width:auto;
}