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

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?

CodePudding user response：

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 >
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div >
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div >
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>

CodePudding user response：

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;
}

CodePudding user response：

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  style="width: 435px; height: 320px">
   <img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>

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

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