Stop table cell from adapting to true image size

Question

It's interesting how a table cell won't adapt to your resized image when you resize it by percentages. If you resize it with absolute values, it does the job.

Is there any solution to this?

Let's say we have an img with 200px width.

Now, 2 code scenarios.

First:

<td><img src="..." style="width: 50%; height: auto;" /></td>

Second:

<td><img src="..." style="width: 100px; height: auto;" /></td>

I would assume in both cases it will look the same, but it doesn't. In the first case the td still has a width of 200px. Only in the second case the td resizes to 100px width.

Percentual resizing is very important to me though. Is there any css trick for this problem?

Example: http://jsfiddle.net/xndks9r1/

Answer 1

With:

<td><img src="..." style="width: 100px; height: auto;" /></td>

you are setting the width of the image to a specific value.

With:

<td><img src="..." style="width: 50%; height: auto;" /></td>

you are setting the width of the image to 50% of whatever the width of the <td> is. In your Fiddle, the width of the <td> is set by the text in the right-hand column.

Answer 2

When you write <img style="width: 50%;" /> <img style="width: 50%;" /> , the 50% does not refer to 50% of the original image size. It actually refers to 50% of the parent's width, and in this case the parent is the <td> .