How can I set the max-height same as width-CodePudding

I'm currently working on my blog where I am trying to fit all Images into a 1:1 Ratio, which works great for images where the height is larger than the width. Well on the other hand it also works "well" with images where the width is bigger. But the main problem I have is that the images with a bigger width don't need to be fit in into the 1:1 ratio as this would align the description below better.

How can I fix this? (Please find my code below):

CSS:

.img-container {
    background: transparent;
    position: relative;
    width: 100%;
}

.img-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.img-container img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}

HTML:

<div >
<img src="xxx"/>
</div>

Thank you in advance!

CodePudding user response：

I'm not sure what you're asking. Additionally, none of those pictures have a 1:1 aspect ratio, that would mean they were perfectly square.

If you want to apply different css based on whether the image is landscape or portrait, then I think you're going to need to implement some javascript to detect the measurements and then apply the css class you wish to be applied.

Otherwise, my initial thought is, why don't you just apply a max-width? Portrait images will take up as much horizontal space as they need up to the max, while landscape images will take up to the max without distorting the current aspect ratio.

CodePudding user response：

object-fit: cover; will adjust the size of the image.