CODEWITHSUNDEEP
htmlcssimage
Lbab
Lbab

Reputation: 11

Having both portrait and landscape images auto-crop to fit a thumbnail

I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".

This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.

For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.

Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.

A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.

I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)

Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.

"Link"

My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.

If you'd like me to make a fiddle, just ask and you shall be given.

Thanks for reading, hope I made myself clear, English not being my primary language.

EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up) L.

Upvotes: 1

Views: 11055

Answers (3)

Pinte Dani
Pinte Dani

Reputation: 2049

In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:

.center-cropped {
    object-fit: cover;
    object-position: center;
    height: 200px;
    width: 270px;
}

...

And in html, you can use this class directly in the img tag:

<div>
    <img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>

This will show only a "centered" version of your image, for both portrait and landscape images

Upvotes: 0

Andr&#233;sAugusto
Andr&#233;sAugusto

Reputation: 21

I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:

min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;

The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.

As for positioning the image inside the div, I recently found the use of this excerpt very useful:

margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;

With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.

Upvotes: 2

web-tiki
web-tiki

Reputation: 103770

The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).

If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :

FIDDLE

The CSS I added/modified from your example :

.galleryItem a{
    display:block;
    position:relative;
    padding-bottom:50%;
    overflow:hidden;
    border-radius: 5px;
}
.galleryItem a img {
    position:absolute;
    width: 100%;
    height:auto;
    display:block;
}

Upvotes: 3

Related Questions