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