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.

Answer 2

I had the same problem because I'm using the same jquery plugin (ie-slider). I found out that the image is passed additional (inline) styles from the Javascript code and in fact it is just shifted-left and not actually cut off. The code passes dynamic values to the tag which are got from the image itself at the time of re/load in a particular viewport width. The author uses this in the .js file.

var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src'));  //gets the dimensions from the image

He then gives the image a margin-left like so

$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline

When the viewport width gets smaller this is always a negative value. The work around is to set

$img.css({marginLeft: 0});

It worked fine for me after, with no arising issues from the change. Good luck.

Answer 3

I have a simple solution for that. Just give the width parameter in terms of view-port percentage.

Syntax :

width: <Percentage>vw;

Example :

<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">

Here, the height of the image is fixed but the width will be resized to 100% of the view-port, whatever its size may be.

Hope this helps :)