Why images aren't responsive in FF and IE?

Question

I have big problem. Tried almost everything and it still doesn't work properly.

Everything works fine in Opera, but in FF and IE images aren't responsive. I mean they are displayed with original dimensions instead of fitting a div (like in Opera).

Here is the link: http://gksolutions.pl/oferta/strony-internetowe

Any help my friends? I literaly wasted 2 days on it already. It's not bootstrap, just a simple grid system.

How does it look in FF and IE:

How it looks in Opera

Basically images aren't scaling properly in FF and IE, although row div is set to 350px height and img is styled with:

max-width:100%;
height:auto;

Answer 1

The problem here isn't with the images, but with the display: table; and display: table-cell; on the parent elements.

As far as I can tell, adding table-layout: fixed; after display: table; (in .element .row .row_inner > div) solves the layout problem.

See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information on what table-layout does.

Answer 2

I see no problems in IE11, but if I'm understanding you right, just use images as div backgrounds (css background-image) and everything will be fine.