CODEWITHSUNDEEP
htmlcsshtml-tablehtml-email
JeezItsMe
JeezItsMe

Reputation: 33

HTML emails - Fit an image in a table cell

I have a table with three td and each of them needs to have images in them. The width and height of td are fixed but the image sizes can vary. Goal is to fit the images without distorting in cells or image itself. Cannot use background-image property (sucks I know!). Here's the code:

<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; width: 100%; height:auto;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:auto;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:100%;" />
        </td>
    </tr>
</table>

I've tried three different styles in three cells - none giving me a result where images get resized. Any help appreciated. Thanks.

Upvotes: 3

Views: 12790

Answers (4)

Morphy
Morphy

Reputation: 146

Try using - max-width: 100% and max-height:100% for image style. That will max out the larger value (height or width) to the witdh (or height) of the cell without streching the image.

EDIT: new to this...adding code snippet. Since your style is inline, I left it like that.

<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; max-width: 100%; max-height:100%;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%%;" />
        </td>
    </tr>
</table>

Upvotes: 3

Ram kumar
Ram kumar

Reputation: 3162

Here is the. You can use height: 100% and object-fit:cover

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" />
        </td>
    </tr>
</table>

Upvotes: 0

K K
K K

Reputation: 18099

Try:

style="display:block;max-width: 100%; height:auto;"

Upvotes: 0

Umar Aslam
Umar Aslam

Reputation: 1

May be facing this problem because you may use the CSS in your project and the width and height there also..you may check thoroughly your whole CSS as well as the HTML...

Upvotes: 0

Related Questions