Question

Here is the website I’m working on:

I can get the image not to stretch by removing height: 481px; but then I lose the caption and squares below the image and it moves around if the images are different heights. I’ve tried messing around with positioning, but I haven’t found a solution.

Answer 1

There are several ways you can solve this.

A cleaner solution, as @Sven pointed out, would be to use the tag <div> instead of <img> and use the images as background for the div.

Or,

you can use the CCS clip property to crop all your images to the same size, while maintaining their original proportions:

img {clip:rect(0px,60px,200px,0px)}

(check this link for documentation on clip: http://www.w3schools.com/cssref/pr_pos_clip.asp)

The fastest solution for you at this point however (the one that needs less changes on your actual code) might be to use the absolute positioning, only, instead applying it to the div .text-box apply it to his parent .slider-cont-wrapper.:

.slider-cont-wrapper {position:absolute; top:100px; right:100px}

(change top: and right: to measures that suit your layout)