Reputation: 6866
I have something that looks like this:
<table>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
...
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
</table>
The objective is, if possible, to have the image to "kinda" ajust the size of the row.
Let's say, the image is of size 200x200 (in px). I want to image to shrink up to 100px if the row where it is thinner then the size of the image (it it didn't have the image).
For example:
If, without the image, the row is < 100px height, with image, it becomes 100px height
If, without the image, the row is 140px height, with image, it stays 140px height
If, without the image, the row is 200px height, with image, it stays 200px height
If, without the image, the row is 260px height, with image, it stays 260px height but the image does not get any big than the 100%, which is the 200px.
I have already tried using a min-height + height + max-height for both the td and the img tags but nothing was changing from the browser's perspective.
Notes:
I'm using the doctype for XHTML 1.1
I don't need answers that require JavaScript. I already know how to do with JS (even without jQuery). I want a CSS only answer.
Upvotes: 0
Views: 3726