Fluid images in IE and FireFox (max-width)

Question

I'm trying to do a fluid design, so the images will resize down, when browser windows is resized.

I used max-width, and that worked well for Chrome, Safari and opera, but in IE and FireFox it does not work (the images are shown with their full size, which is much bigger than width of page itself).

I know some people might tell me to use just width: 100%; but that resizes small images to size of parent element, which is not ok.

Does somebody have any solution to this? It has to be pure HTML & CSS, no JS.

img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

The image is basically in Table thats inside of a div, thats inside of a div.

Not actual code (but simplified version of how it is), as it would take a lot more space:

<div class="blabla">
    <div class="blablabla" style="max-width: 1110px;">
        <table><tr>
            <td> Text, random, ladida, text 
            <img src="random_source.lol"/></td>
        </tr></table>
    </div>
</div>

The thing is, I wan't all images to scale down if needed, not only some.

Thanks.

Ps.: I already googled a lot and red topics here without success.

Have you tried to use vh units ? http://www.w3schools.com/cssref/css_units.asp — ppascualv, Jan 05 '15 at 12:49
@pabliiitoo Why `vh`? He needs full *width*, so he should use `vw` — The Pragmatick, Jan 05 '15 at 12:54
Works just fine across browsers: http://jsfiddle.net/abhitalks/mxmzjnaL/1/. Problem is with your table. Give your `td` some size and `table-layout:fixed;`. See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2/ — Abhitalks, Jan 05 '15 at 12:57
I can't add table a fixed width, as whole design is fluid. It goes from 1920px wide to about 400px wide. — MiChAeLoKGB, Jan 05 '15 at 13:06
@MiChAeLoKGB: Did you see the second fiddle I linked to? Use percent units for your table too. That will keep it fluid. — Abhitalks, Jan 05 '15 at 13:10
are you able to post a link? not much to suggest without the actual code etc — atmd, Jan 05 '15 at 13:10
This might help http://stackoverflow.com/questions/24247064/css-image-max-width-not-working-with-firefox-ie — Ankur Aggarwal, Jan 05 '15 at 13:10
@abhitalks Yeah, that fixed it. I had percentage everywhere and was already using table-layout:fixed; , but I think I forgot width for table that contained the news... Meh. Could you post it as answer, so I can accept it? Thanks. Ps.: There is no need for TD width. — MiChAeLoKGB, Jan 05 '15 at 13:33
@MiChAeLoKGB: Good to know that you could solve your problem. Cheers :) — Abhitalks, Jan 05 '15 at 14:51

score 1 · Accepted Answer · answered Jan 05 '15 at 14:50

1

Your code works just fine across browsers.

See this demo: http://jsfiddle.net/abhitalks/mxmzjnaL/1

Problem is with your table. Give your table and/or td some size and a table-layout:fixed; to your table.

See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2

Relevant CSS:

table {
    table-layout: fixed;
    width: 50%;
}
td {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

Note: Use percent units for the width of table to keep it fluid.

.

answered Jan 05 '15 at 14:50

Abhitalks

27,721
5
58
81

Hi, I was doing some more testing and adding an table-layout: fixed; broke a lot of the content on the site, and adding it manualy to every table is not the best way for me. Is there other way, or do I have to add it manualy for every "outside" table? Thanks. – MiChAeLoKGB Jan 05 '15 at 16:33
Not really. If you don't use `table-layout:fixed`, IE will freak out. – Abhitalks Jan 05 '15 at 16:39
Ah, F you IE, right? xD I'm glad they're creating new browser for WIN 10. I added it manualy to all dem tables. Thank you again :) – MiChAeLoKGB Jan 05 '15 at 16:48
The requirement to specify width of `` is a deal-breaker. I'm hitting this same issue on our site with user authored content (we're allowing both images and tables). I don't know if the image should be scaled down or up, the image cell definitely should not be sized `50%` by default, etc. – Mikko Rantalainen Apr 04 '16 at 13:02

Fluid images in IE and FireFox (max-width)

1 Answers1

Linked