CODEWITHSUNDEEP
firefoxcross-browsercss
Forrest
Forrest

Reputation: 151

Max-height ignored in Firefox, works in Chrome and Safari

I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:

.display {
    max-width: 80%;
    max-height: 80%;
}

It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.

Thanks very much for any help.

Upvotes: 15

Views: 22681

Answers (6)

Annity
Annity

Reputation: 126

Changing max-heigth to 80vh worked for me.

Upvotes: 0

Julio Garcia
Julio Garcia

Reputation: 734

Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.

There is also a delay when the max-height property is changed matching the duration of the animation.

Upvotes: 1

Maximilian Lindsey
Maximilian Lindsey

Reputation: 849

I had the same problem today but with the nice twist that I could not set all parental elements to a height of 100%.
I found a clue to another solution to this problem here:

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

You can assign not only % to max-height, but also "em", so if you set your html and body to a font-size of 100% this works similiar to a percental width. 

<div>
 <p>
    <img src="" alt="">    
 </p>
</div>

html,body{
font-size: 100%;
}

img{
max-width: 100%;
max-height: 50em;
}

DEMO

Upvotes: 0

nasty
nasty

Reputation: 7077

You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers. 

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.display {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

There's a working example here: http://jsfiddle.net/P7wfm/

If you don't want image to crop if they exceed the 80% height or width set img height to

.display img {
    min-height: 100%;
    min-width: 100%;
}

Upvotes: 9

user1680512
user1680512

Reputation:

I agree with @Uds, you will need to specify the height and width of the body and html element

Other thing to keep in mind:

Moreover you will also need to define the browser in CSS code, you can define it by follow:

.display{
  /* For general browser */
  max-width: 80%;
  max-height: 80%;

  /* For Firefox browser */
  -moz-width: 80%;
  -moz-height:80%;

  /* For Chrome and Safari browser */
  -webkit-width: 80%;
  -webkit-height:80%;

  /* For Opera browser */
  -o-width: 80%;
  -o-height:80%;
}

This will specify that which browser should have what kind of height or width.

Upvotes: 3

Māris Kiseļovs
Māris Kiseļovs

Reputation: 17295

You need to set height for container element or to body:

body {
    height:100%;
    min-height:100%;
}

Upvotes: 1

Related Questions