How to make image fit to div and centered at the same time?

Question

If I want to fit a large image(with arbitrary aspect ratio) into a small div, according to this answer, I just need to set the maximum width and height to 100%,

img {
    max-width: 100%;
    max-height: 100%;
}

And if I need to further center the image, according to this answer, we can set the margin to auto,

img {
  display: block;
  margin: 0 auto;
}

But in this way, the image is only centered in horizontal. To have it vertically centered, I've tried following approaches but don't work.

img {
  margin: auto auto;
}

img {
  vertical-align: middle;
}

Any one can help?

@Bravo With grid we can't control the size of the inner image. — shen, May 10 '22 at 02:27
would the image as a background work for your undefined requirements? — Bravo, May 10 '22 at 02:28
@Bravo that could be my last resort. I'd like to achieve it as a normal image. — shen, May 10 '22 at 02:32
Does [this](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) work for you? — vee, May 10 '22 at 02:33
Not sure if If follow. If the image is shrunk to fit the entire content of the div, how could it be centered if there is no padding outside of it? — Max Voisard, May 10 '22 at 02:44
@MaxVoisard If the width of the image hit the maximum width first — shen, May 10 '22 at 02:52

score 2 · Accepted Answer · answered May 10 '22 at 02:37

2

you can use display flex:

.div {
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100%;
  max-height: 100%;
}

.portrait {
  height: 80px;
  width: 30px;
}

.landscape {
  height: 30px;
  width: 80px;
}

.square {
  height: 75px;
  width: 75px;
}

Portrait Div
<div class="portrait div">
  <img src="https://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div class="landscape div">
  <img src="https://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div class="square div">
  <img src="https://i.stack.imgur.com/xkF9Q.jpg" />
</div>

answered May 10 '22 at 02:37

ismail bilal

80
1
3

Thanks! Any equivalent solution in grid? It would be strange if only flex can do this. – shen May 10 '22 at 03:02
1

yes, you can change `.div` class in the example above to `display: grid; grid-template: 100% / 100%; place-items: center;` – ismail bilal May 10 '22 at 03:16

score -1 · Answer 2 · answered May 10 '22 at 02:35

Here is a small trick to use...

First, make sure the parent div is set to position:relative;

Then in the img add this values

position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%) !important;

This will automatically align the img in the middle of the parent div. You can delete all other values and use it like this

img {
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%) !important;
}

Max Voisard · Answer 3 · 2022-05-10T06:07:57.343

Based on if the inline height and width of the parent div has an aspect ratio larger or smaller than the image, the image will center either horizontally or vertically. There is a little cheat with JavaScript, but looking at the CSS, this seems to be close to what you were initially attempting.

$(".imgContainer").each(function() {
   const height = $(this).height() > $(this).children("img").eq(0).height() ? parseFloat($(this).height() * 0.99) + "px": "100%";
   $(this).css("line-height", height);
});

.imgContainer {
  text-align: center;
  border: 3px solid blue;
}

.imgContainer img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imgContainer" style="width: 435px; height: 320px">
   <img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>

<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 260px">
   <img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>

<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 289px">
   <img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>

How to make image fit to div and centered at the same time?

3 Answers3