CODEWITHSUNDEEP
jquerycssimagesize
Zander
Zander

Reputation: 1086

Keeping aspect ratio with CSS (if possible)

I've got a little issue here with height images.

Demo: https://jsfiddle.net/96nzkgfp/

As you can see on the demo, when you go to "rocket raccoon" image, the height of this one exceeds the other ones.

.gallery-elements .gallery-image-big {
    position: relative;
}
.gallery-elements .gallery-image-big img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 600px;
}

The thing is, that I would like to avoid introducing an height attribute to the image or the above class, so I don't know if I really will need to remove that max-height or I would need some kind of jQuery function to keep an aspect/ratio.

Any help to try to make the images don't get crazy on the height size, regarding the size of the natural image, would be very kind of you.

Upvotes: 0

Views: 55

Answers (2)

Siavas
Siavas

Reputation: 5090

First approach: CSS only (undesirable)

.gallery-elements .gallery-image-big {
    position: relative;
    height: 230px; /* Setting fixed height will not keep an aspect ratio */
    overflow: hidden; /* Hide the images additional height */
}
.gallery-elements .gallery-image-big img {
    position: absolute; /* Centering images and keeping their aspect ratio */ 
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 600px;
}

Second approach: jQuery and CSS (reliable but not perfect)

CSS: center again images with absolute position, and set the overflow to hidden for the containing div.

.gallery-elements .gallery-image-big {
    position: relative;
    overflow: hidden;
}
.gallery-elements .gallery-image-big img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    max-width: 100%;
}

jQuery: add this to your script, at the end of the $(document).ready() function:

var sliderw = $('.gallery-image-big').width();
$('.gallery-image-big').css({
    'height': sliderw / 1.777
});

This sets the height according to the width - being the result of the width divided by 1.777 results in an aspect ratio of 16:9, which is the most used nowadays.

Checking with http://jshint.com/, you had some missing semicolons. This new demo has them fixed.

I am describing this as "not perfect" as it will run the function only one time, meaning that when the window is resized the aspect ratio will not be retained.

Besides that, you have set the width of the parent div to 1280px and the max-width to 100%. I assumed that you wanted to have it in full width unless it is larger than 1280px, therefore I swapped these two values in the demo.

Upvotes: 1

Leo Napoleon
Leo Napoleon

Reputation: 989

Try using max-height: 400px; margin: 0 auto; on your - as I noticed the other images are 400px wide and the auto margin will keep it centered. If you wish to keep it centered vertically as well, there are many methods to achieve this, but since it's 2016, I'd say go for Flexbox - display: flex; align-items: center; on parent and you're good to go.

Upvotes: 0

Related Questions