CODEWITHSUNDEEP
javascripthtmlcss
timmaktu
timmaktu

Reputation: 163

displaying image of unknown size inside div of fixed size

I have a <div> of fixed size say height:100px and width:100px. I have to display images of unknown size inside this <div> such that following cases arise:

  1. image width > div width
  2. image width < div width
  3. image width = div width
  4. image height > div height
  5. image height < div height
  6. image height = div height

no matter what, what is the best cross browser strategy, with support for legacy browsers, to display them with following criteria:

  1. no white space around image
  2. nicely centered (horizontally and vertically) if overflow

Upvotes: 6

Views: 12567

Answers (4)

Destiny Maina
Destiny Maina

Reputation: 71

The best way to do this is by using object-fit property.

.image-container {
    width: 400px;
    height: 300px;
}

.centered-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<div class="image-container">
  <img src="https://24seven.co.ke/uploads/sliders/1550944223ecommmerce.jpg" alt="24seven Developers slider" class="centered-image">
</div>

For more illustrations and geeks see this.

Upvotes: 0

gilly3
gilly3

Reputation: 91497

To eliminate white space, set min-height and min-width to 100% for the images. To clip the overflow, set overflow: hidden on the div. To center overflowing images, use absolute positioning and some JavaScript to set top and left values based on the size of the image.

Edit: If the image is larger than the container in both dimensions, use some JavaScript to remove the minHeight and minWidth and then set the height to 100%. If that leaves whitespace on the width, set height to "" and set width to 100%:

.centeredImageContainer {
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
.centeredImage {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}

function centerImage(img) {
    var container = img.parentNode;
    if (img.offsetHeight > container.clientHeight &&
        img.offsetWidth > container.clientWidth) {
        img.style.minHeight = "0";
        img.style.minWidth = "0";
        img.style.height = "100%";
        if (img.offsetWidth < container.clientWidth) {
            img.style.height = "";
            img.style.width = "100%";
        }
    }
    img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
    img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}

jsfiddle.net/QRU4w/2

Upvotes: 4

mattsoave
mattsoave

Reputation: 348

If you mean that you need to have no whitespace including above a landscape-oriented image, for example (i.e. the photo needs to fill the square, regardless of whether it is originally a square), then you may want to look into setting the image as the div's background and using background-size: cover. See this link for browser support.

Upvotes: 0

Plato
Plato

Reputation: 11052

edit:

fiddle

html:
<div id="myPic"></div>

css, if you want a big pic to shrink to fit while still filling the whole div, and want a small pic to expand to fill the whole div:

#myPic{ 
  width: 100px;
  height: 100px;
  background-image: url(/abs/path/img.jpg);
  background-size: cover;
}

css, if you want a big pic to only display a window of the middle without resizing:

#myPic{ 
  width: 100px;
  height: 100px;
  background-image: url(/abs/path/img.jpg);
  background-position: center center;
}

I don't know of a way to both expand small images to fit, while not shrinking big images.

Upvotes: 3

Related Questions