33

First post for me here.

I'm using a div to crop thumbnail images all in the same proportions (180wx170h). I'm getting stuck when dealing with portrait as well as landscape images. If am using this which is fine for portrait style images: 

.crop img {max-height:170px; width:auto}

.. and is fine for landscape style images:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.

So I basically want to crop the sides if landscape and top/bottom if portrait. Kind of like a prioritized max-height and max-width.

I know this could be done easily with PHP but I really only know CSS so that would be my first preference.

I need to maintain the aspect ratio of the image.

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
Andy Blanc
  • 333
  • 1
  • 3
  • 5

6 Answers6

75

the solutions after going through loads of other 'solutions'

max-width:100%;
max-height:100%;
height: auto;
width:auto;
Emil
  • 7,051
  • 17
  • 72
  • 131
Nick
  • 751
  • 1
  • 5
  • 2
  • 5
    This is actually nice and should be the answer. Extremely useful in my case where the HTML is not from myself but from outside source (so I cannot switch to background image). – Luke Vo Jun 02 '16 at 14:53
  • 1
    yes - i can't believe its so simple after messing with jQuery and trying to figure out if something was landscape or portrait! – v3nt Dec 01 '16 at 14:29
  • 1
    After years of messing around with this, I can't be believe the solution was always so simple. Even works in IE9… – nils Mar 27 '17 at 13:26
  • This totally worked for me! Even with setting max-width and max-height to pixel values. I'm kind of embarrassed I didn't figure this out years earlier. – Evster Jun 02 '18 at 07:49
21

Edit 2019:

If you want to keep <img> tags, please look into object-fit css property, support of it across browsers is quite good.

And if you want to keep aspect ratio on width change, try padding-hack.

As I understand you have blocks 180x170 px and you want to fill them completely with images. Try to move images to background and use background-size:cover.

Demo http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Note that this solution not working in IE8 and below.

antejan
  • 2,494
  • 10
  • 15
3

Edit: I have improved the solution, see here: https://stackoverflow.com/a/34774905/1663572

I'm using this solution, which i found, when I was trying to fit and center images into squares (or whatever). It is brilliant in combination, where you set padding-bottom and height 0 to its container - that makes it responsive with fixed ratio.

Works in IE9 and higher. For IE8 and below some CSS hacks needed.

HTML

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Try it here: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/

Notice: If using bootstrap change the class .container to something else.

Community
  • 1
  • 1
actimel
  • 426
  • 4
  • 20
2

You could try

.crop img {max-height:170px; max-width:180px;}

Since max-height and max-width are maxima, it should work. The browser will make the image as big as possible, without going over your dimensions.

Note that this is untested, but based on this W3Schools page.

Hope this helps!!

ameed
  • 1,107
  • 6
  • 23
  • 5
    I have tried that however if both dimensions exceed the max-height/width then the image loses it's aspect ratio as it scales to both. (I should have mentioned in the OP that maintaining aspect ratio is a priority.) – Andy Blanc Jan 16 '13 at 02:28
0

You have the answer in you!

Try:

.crop img {max-height: 170px; max-width: 180px;}
Community
  • 1
  • 1
Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
  • as per my previous answer it loses aspect ratio if both dimensions exceed the maximums set which i am trying to avoid. – Andy Blanc Jan 16 '13 at 02:48
  • @AndyBlanc I have added that info in the question, but please let us know what browser are you working on. – Praveen Kumar Purushothaman Jan 16 '13 at 02:54
  • I'm working on firefox 18 but have tested in Safari and Chrome with same result. It seems that if both dimensions are exceeded it scales both losing aspect. If one dimension is scaled and the other is still under the maximum set then it displays blank space which i am also trying to avoid. – Andy Blanc Jan 16 '13 at 03:22
  • Got it... Lets see if there's a solution. AFAIK, there's none. – Praveen Kumar Purushothaman Jan 16 '13 at 03:47
0

This might be a bit late, but I found wrapping the said image in <figure> scales the image keeping the aspect ratio.

YS Chung
  • 1
  • 1