Rectangle 27 1

image max height AND max width with CSS only?


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

@AndyBlanc I have added that info in the question, but please let us know what browser are you working on.

Got it... Lets see if there's a solution. AFAIK, there's none.

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.

as per my previous answer it loses aspect ratio if both dimensions exceed the maximums set which i am trying to avoid.

Note
Rectangle 27 0

image max height AND max width with CSS only?


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

@AndyBlanc I have added that info in the question, but please let us know what browser are you working on.

Got it... Lets see if there's a solution. AFAIK, there's none.

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.

as per my previous answer it loses aspect ratio if both dimensions exceed the maximums set which i am trying to avoid.

Note
Rectangle 27 0

image max height AND max width with CSS only?


max-width:100%;
max-height:100%;
height: auto;
width:auto;

After years of messing around with this, I can't be believe the solution was always so simple. Even works in IE9

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).

the solutions after going through loads of other 'solutions'

yes - i can't believe its so simple after messing with jQuery and trying to figure out if something was landscape or portrait!

Note
Rectangle 27 0

image max height AND max width with CSS only?


<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;
}

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.

Note that this solution not working in IE8 and below.

Thanks @antejan ! I have to go back and edit a lot of posts but it does the trick.

Note
Rectangle 27 0

image max height AND max width with CSS only?


<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;
}

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.

Note that this solution not working in IE8 and below.

Thanks @antejan ! I have to go back and edit a lot of posts but it does the trick.

Note
Rectangle 27 0

image max height AND max width with CSS only?


.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;
    }
}

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.

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

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

Note
Rectangle 27 0

image max height AND max width with CSS only?


.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;
    }
}

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.

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

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

Note
Rectangle 27 0

image max height AND max width with CSS only?


max-width:100%;
max-height:100%;
height: auto;
width:auto;

After years of messing around with this, I can't be believe the solution was always so simple. Even works in IE9

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).

the solutions after going through loads of other 'solutions'

yes - i can't believe its so simple after messing with jQuery and trying to figure out if something was landscape or portrait!

Note
Rectangle 27 0

image max height AND max width with CSS only?


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

Don't refer to W3School, it's full of inaccurate information w3fools.com

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.)

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

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