Skip to Content (Press Enter)
2017-08-09 12-12-29
Jason Herrington
671Views
4Comments
Solved
image size in firefox vs chrome
Question
if you go to sums.gatech.edu and open it in firefox and chrome, below the intro stuff at the top there is a table records 3 wide with cardsimpleimage in each.  For each image I have under extended properties style and "max-width: 100%;max-height: 200px;". So in Chrome the table is nicely sized and the images match.  In firefox its almost like it just throws the image up there full size.  Has anyone run into this and know a fix?
0
0
14 Jun 2016
Copy Link
2016-04-21 20-09-55
J.
 
MVP
Solution
give the parent container a width 

or


add this to your stylesheet:
@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

 

See solution in context
1
0
14 Jun 2016
Copy Link
2017-08-09 12-12-29
Jason Herrington
J. wrote:
give the parent container a width 

or


add this to your stylesheet:
@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

 
 Well I already had a parent container of "fill parent" and it didn't seem to work.  However, added that code to the style sheet and it worked!!  Thank you!
 
0
0
14 Jun 2016
Copy Link
2016-04-21 20-09-55
J.
 
MVP
well, 

imho, firefox has it right.
for example: the image "instructional lab..." is of size 894x180, so it meets your style.
max-width: 100%, and the height is 180px, so less than 200px..

since you are applying it to the style it has the highest priority in CSS-land.

anyhow, your containers above are not specifying a width, so it's a matter of interpretation of the browser how to handle it.
 

 


0
0
14 Jun 2016
Copy Link
2017-08-09 12-12-29
Jason Herrington
J. wrote:
well, 

imho, firefox has it right.
for example: the image "instructional lab..." is of size 894x180, so it meets your style.
max-width: 100%, and the height is 180px, so less than 200px..

since you are applying it to the style it has the highest priority in CSS-land.



 

 
 Well - how can I get firefox to display the same as chrome?
 
0
0
14 Jun 2016
Copy Link
2016-04-21 20-09-55
J.
 
MVP
Solution
give the parent container a width 

or


add this to your stylesheet:
@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

 

1
0
14 Jun 2016
Copy Link
2017-08-09 12-12-29
Jason Herrington
J. wrote:
give the parent container a width 

or


add this to your stylesheet:
@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

 
 Well I already had a parent container of "fill parent" and it didn't seem to work.  However, added that code to the style sheet and it worked!!  Thank you!
 
0
0
14 Jun 2016
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.