CODEWITHSUNDEEP
cssimagecoverbackground-sizeobject-fit
Koshua
Koshua

Reputation: 47

Alternative to background-size: cover for img tags?

I'm trying to make an <img> fill its wrapper entirely at all times without stretching or changing the image proportions.

Seeing as object-fit doesn't work for IE/Edge without polyfills, does this solution cover all edge cases? 

.image-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



<div class="image-wrapper">
    <img src="*image source here*" alt="*image alt here" />
</div>

The only problems I see with this are images with a very oblong length or width might need to be cropped specifically to show the desired content in the photo...or the position values changed...depending on how the shape of the container is in relation to the shape of the image.

Upvotes: 0

Views: 728

Answers (1)

Korgrue
Korgrue

Reputation: 3478

background-size:cover would indeed be the correct way to do this. 

.imgwrapper{
  background: url(images/yourimage.jpg) no-repeat center center; 
  background-size: cover;
}

Alternately, there are plugins that will allow you to do this with inline images, though I have found them less than perfect when using images that are significatly different in aspect ratio from the view box.

Example: https://www.jqueryscript.net/other/jQuery-Plugin-To-Resize-Center-An-Image-Within-Its-Container-Image-Cover.html

Upvotes: 2

Related Questions