I'm trying to utilize CSS to fill my window with an image while maintaining quality. Is there a way to maximize the width/height of the image until all the white space is filled without compromising its quality?
<div class='rel-img-cont'>
<img src='src.jpg' />
</div>
.rel-img-cont
{
width: 100px; height: 100px; overflow: hidden;
}
.rel-img-cont img
{
height: 100px; margin:0 0 0 0;
}
How can I fill the white space so that, if needed, one of the sizes overflows but only up to 100px?
Is there a way to achieve this regardless of the original image size, be it 100px x 100px or 150px x 200px, ensuring 100px is the maximum limit and one of the sides will adjust accordingly?
Thanks