How can I position these thumbnails under the slider? - html

Question

So, I found this cool css/html slider on a website, so I downloaded the code, and am going to study it. I've started to edit it and style it to my own needs, and I came upon this problem: when I added an image of a bigger size than the originals, the navigation thumbnails got covered. I want them under the slider.
CSS and HTML
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
}
.slider {
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img {
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
<div class="slider">
<input type="radio" name="slide_switch" id="id2" checked="checked" />
<label for="id2">
<img src="http://www.placehold.it/100" width="100" />
</label>
<img src="http://www.placehold.it/200X800" />
<input type="radio" name="slide_switch" id="id3" />
<label for="id3">
<img src="http://www.placehold.it/100/FF0000" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF0000" />
<input type="radio" name="slide_switch" id="id4" />
<label for="id4">
<img src="http://www.placehold.it/100/FF9900" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF9900" />
<input type="radio" name="slide_switch" id="id5" />
<label for="id5">
<img src="http://www.placehold.it/100/FFFF99" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

Answer 1

Start by restricting the width and height of the img to its container:
.slider > img {
max-width: 100%;
max-height: 100%;
}
Now, let's centre the image, this will look a lot better for images that don't span the width of the container:
.slider > img gets left: 50% and transform: translateX(-50%) (placed next to the existing scale transform).
Working Example
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
}
.slider {
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
position: absolute;
left: 50%;
top: 0;
max-width: 100%;
max-height: 100%;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img {
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1) translateX(-50%);
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1) translateX(-50%);
}
<div class="slider">
<input type="radio" name="slide_switch" id="id2" checked="checked" />
<label for="id2">
<img src="http://www.placehold.it/100" width="100" />
</label>
<img src="http://www.placehold.it/640X320" />
<input type="radio" name="slide_switch" id="id3" />
<label for="id3">
<img src="http://www.placehold.it/100/FF0000" width="100" />
</label>
<img src="http://www.placehold.it/1000X1000/FF0000" />
<input type="radio" name="slide_switch" id="id4" />
<label for="id4">
<img src="http://www.placehold.it/100/FF9900" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF9900" />
<input type="radio" name="slide_switch" id="id5" />
<label for="id5">
<img src="http://www.placehold.it/100/FFFF99" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

Answer 2

You can give a max-width and a max-height to your images so that they always fit in the container without stretching.
.slider>img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
/* ADD THESE LINES */
max-width: 100%;
max-height: 100%;
}