Max-height fluid image responsive doesn't work in Chrome, Firefox etc. but works in Safari

Question

I'm trying to accomplish image resizing for height (I'm aware of width:100%, height:auto for width resizing). The below setup works in Safari (~8.02) but Chrome and Firefox (latest) don't care at all. Any ideas? If no CSS hacks exist, I'm open to jQuery solutions (I guess).

body, html {
  width:100%;
  height:100%;
}

body {
  background: lightgreen;
}

.full {
  width:100%;
  
}

.block {
  background: lightcoral;
  width: 80%;
  text-align: center;
  position: absolute;
}

.logo {
  max-width: 100%;
  max-height: 80%;
}

<div class="full">
  <div class="block">
    <img src="http://placehold.it/709x534" class="logo">
  </div>
</div>

score 1 · Accepted Answer · answered Feb 05 '15 at 02:58

1

In addition to the CSS above, declaring a height of 100% on the container (in this case, .block) resolved the issue on Chrome and Firefox. It now matches Safari behavior as intended.

answered Feb 05 '15 at 02:58

Mr Bullets

634
6
13

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Are you trying to purposely distort your image after it goes beyond an 80% height? Check out this post... Max-height ignored in Firefox, works in Chrome and Safari

edited May 23 '17 at 12:20

Community

1
1

answered Feb 05 '15 at 01:11

Eric

149
11

1

The solution works fine in Safari but not Chrome (let alone Firefox). The image doesn't appear to be distorted and the link provided is using less than 100% width. If you view in Safari, you'll see the difference. – Mr Bullets Feb 05 '15 at 02:55

score 0 · Answer 3 · answered Feb 05 '15 at 03:04

In addition to the CSS above, declaring a height of 100% on the container (in this case, .block) resolved the issue on Chrome and Firefox. It now matches Safari behavior as intended:

body, html {
  width:100%;
  height:100%;
}

body {
  background: lightgreen;
}

.full {
  width:100%;
  
}

.block {
  background: lightcoral;
  width: 80%;
  text-align: center;
  position: absolute;
  height: 100%;
}

.logo {
  max-width: 100%;
  max-height: 80%;
}

<div class="full">
  <div class="block">
    <img src="http://placehold.it/709x534" class="logo">
  </div>
</div>

Max-height fluid image responsive doesn't work in Chrome, Firefox etc. but works in Safari

3 Answers3