Resize Images as viewport resizes without sides being cut off

Question

I have a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller).

Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)?

Check out my webpage and resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...

HTML: Note my Original image is 1024x500

 <div class="ei-slider">
 <ul class="ei-slider-large">
   <li>
   <img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
   </li>
 </ul>
 </div>

CSS:

The normal CSS for large screens

.ei-slider{
    position: relative;
    width: 1024px;
    height: 500px;
    margin: 0 auto;
}
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
}
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ei-slider-large li img{
    width: 100%;
}

For when the Browser window goes below the image width: 1024px:

@media screen and (max-width : 1023px){
    .ei-slider{
        width: 100%;
    }   
}

For smaller screens when my images are cut off: Note my Original image is 1024x500

@media screen and (max-width: 930px) and (min-width : 831px){
    .ei-slider{
        width: 100%;
    }   
    .ei-slider-thumbs li a{
        font-size: 11px;
    }
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: visible;
    height: 100%;
    width: 100%;
    }
    .ei-slider-large li img{    /*HERE IS MY PROBLEM*/
        width: 930px;
        height: 454px;
    }
}

Thank you!

Answer 1

you use:

max-width: 100%;
height: auto;
width: auto; /* for ie9 */

This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.