CODEWITHSUNDEEP
cssimagefirefoxresize
jse
jse

Reputation: 23

Image Not Resizing Properly in Minimized Firefox Window

I am working on a site. The problem page in question is here:

http://bit.ly/I4YR2T

Currently I have the images in a table. I am also using Shadowbox for these images.

When I minimize the browser window in Chrome and Safari, the images scale down nicely.

However, the images are not scaling down nicely when I minimize the window in Firefox.

This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.

I know this must be due to some shoddy CSS on my part.

Can anyone guide me on how to resolve this problem?

Thank you so much!

Upvotes: 1

Views: 3290

Answers (2)

user3250805
user3250805

Reputation: 43

Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:

/* begin HeaderObject */
.banner-img {
  display: block; 
  margin: 0 auto; 
  max-width: 99%;
  left: 50%; 
}
/* end HeaderObject */

I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.

Upvotes: 0

Dean_Wilson
Dean_Wilson

Reputation: 190

see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.

Upvotes: 1

Related Questions