I am facing a CSS challenge. The issue is with an image that has dimensions of 1024x500 pixels. When the browser window size decreases below the width of the image (1024px), the image starts to get cropped on the sides. I have set the container width to 100% for viewport sizes below 1024px, which does resize proportionally, but the edges of the image are becoming more and more cut off as the browser window gets smaller.
Is there anyone who can help me dynamically resize my image pixel by pixel without any loss of the original picture or cut offs?
You can view my webpage and adjust the browser window size to observe the issue with the image cropping on the sides...
HTML: Original image size 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:
CSS code 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%;
}
Media query for when browser window is smaller than image width (1024px):
@media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
CSS adjustments for smaller screens where images are cropped: Note that the original image size 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{
width: 930px;
height: 454px;
}
}
Thank you!