Alexandre Krabbe Alexandre Krabbe - 2 years ago 73
HTML Question

How to make images fill table cells while keeping aspect ratio?

What I'm trying to do is fill table cells with random sized images, but I want the cell to keep a height of 200px, the width must be automatically adjusted to fill the whole table width, that is

td{width: 100%; height: 200px;}
. And the images should fit inside the cells in a manner that they fill the whole cell without distortion, they can be cropped if needed.

I was looking for a solution on the forums and found that I should set the size of my table cell to whatever dimensions I want, and then set the image inside it to
img{with: 100%; height: auto;}
It makes sense to me but unfortunately it doesn't work. I put a JSFiddle together to show what is happening: JSFiddle

Any help is appreciated, thank you!

Answer Source

Either force the table cells to have the same ratio as the image (@Terry) or use the image as a background for the cell.


td {
    background-image: url('path-to-image');
    background-size: cover;
    background-position: center;

JSFiddle: Please forgive me for not using all images, but I am sure you got the point :).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download