Fixed Height Table, Constrain Large Image inside Table Cell

Question

I have a table with fixed height, and inside I have a table cell with an icon image that needs to be constrained to the height of the table cell. However, no matter what I've tried, the image will either force the table to expand or just ignore the height: 100%.

Here is the unmodified JSFiddle with the initial layout and styling.

Things I have tried based on other SO answers:

Make sure all parents of img have 100% height (source): JSFiddle
table-layout:fixed, white-space: nowrap, and overflow: hidden (source): JSFiddle
inner position: absolute div to exclude it from layout calculations (source): JSFiddle
inner float: left div to exclude it from layout calculations: JSFiddle

Update:

I'd rather not set the table cell height manually because in the actual layout, the table fits inside a top bar:

So all the heights inside the table should be dynamic

score 0 · Answer 1 · answered Sep 04 '15 at 09:24

0

Is it possible to give the fixed height to the td element and not to the table? Like so:

table tr td { width: 100px; height: 100px; border: 3px solid black; }
img { display: block; height: 100%; width: auto; }

http://jsfiddle.net/webmaas/m5wxyv9j/2/

answered Sep 04 '15 at 09:24

Patte

73
5

yeah I mean that was exactly what I was trying to avoid, because the table height is actually from a container. I'll update the question a bit to elaborate – woojoo666 Sep 04 '15 at 09:31

score 0 · Answer 2 · answered Sep 04 '15 at 12:06

0

try this, its working at my end

img { height: 100%; width: 100%; }

answered Sep 04 '15 at 12:06

Dishank Tiwari

149
10

I use `width: auto` to preserve the aspect ratio of my image. Can you post a JSFiddle link so I can see the entire code? – woojoo666 Sep 04 '15 at 12:16
1

Why should the OP "try this"? A good answer will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO. – Jay Blanchard Sep 04 '15 at 20:17

score 0 · Accepted Answer · answered Sep 18 '15 at 11:57

found a cool article on css flex, turns out its much easier to use for multi-column layouts than a table.

Solution With One Icon

JSFiddle

Solution With 3 Icons

.flexcontainer { display: flex; width: 300px; height: 50px; border: 3px solid black }
.column { flex: 1; height: 100%; }
img { height: 100%; width: auto; display: block; margin: auto }

<div class="flexcontainer">
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
    <div class="column">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/>
    </div>
</div>

score -1 · Answer 4 · answered Sep 04 '15 at 10:09

-1

Why does the icon need to be within a table if I may ask?

answered Sep 04 '15 at 10:09

Jay Welsh

496
4
10

this isn't really an answer, I would recommend commenting next time lol, but the reason I used a table is because I need multiple evenly spaced icons, and I thought the easiest way to evenly space things is with table layouts – woojoo666 Sep 04 '15 at 10:12
Will update my answer with a fix or alternate method once I get home :) – Jay Welsh Sep 04 '15 at 13:10

Fixed Height Table, Constrain Large Image inside Table Cell

4 Answers4