Image Not Resizing Properly in Minimized Firefox Window

Question

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

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!

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

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.

edited May 23 '17 at 11:47

Community

1
1

answered Apr 08 '12 at 07:42

Dean_Wilson

190
13

1

Thank you! So this is a test page (http://bit.ly/HrMqiT) I've made in which the images are no longer in a table; they are just floated. However, when I mimimize the window again in any browser the images spill out over the container. Do you have any guidance on what I'm doing wrong? – jse Apr 08 '12 at 17:25
The images you've got on that page are in a fixed width container. The images will only re-size if the container they are in is of a fluid width and this is not standard for a sldier. This slider will do it for you though, I've used it before and it works well - http://marktyrrell.com/labs/blueberry/ – Dean_Wilson Apr 08 '12 at 23:36
1

Thank you for your help! I've figured out a workaround, but Blueberry looks very promising for future work. – jse Apr 09 '12 at 17:18

score 0 · Answer 2 · edited May 22 '17 at 10:52

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.

Image Not Resizing Properly in Minimized Firefox Window

2 Answers2