问题描述:

I need to build a newsletter and the company doesn't want divs, only tables. Also it must be compatible across browsers. SO can't use, display, responsive fonts, stuff like that. And all CSS must be inline.

In a few cells I need to have 3 images, one in each, with the same size perfectly aligned in a row. They need to be responsive to the size of the cell, occupying 100% of the td.

The problem is that as the browser changes size, the images differ one from another size wise. Example: If the width of the browser changes, Pic1 width goes 150px, but Pic2 goes 152px. Pic3 goes 151px.

Is there way to prevent this from happening?

A little example of what I'm saying. The images have the same size there, but they still differ one from another.(of course those images are stored locally, so you cant really see anything. Just posting here to give an idea of the code.)

<!DOCTYPE html>

<html>

<head>

<title>Table Test</title>

</head>

<body>

<table cellspacing=0 cellpadding=0 style=" width:80%; ">

<tr>

<td style="border: 2px solid #000;">

<img style=" width: 100%; display:block" src="1.png">

</td >

<td style="border: 2px solid #000;">

<img style=" width: 100%; display:block" src="2.png">

</td >

<td style="border: 2px solid #000;">

<img style=" width: 100%; display:block" src="1.png">

</td>

</tr>

</table>

</body>

</html>

Thanks in advance for anyone that can help me. ;)

网友答案:

try append this class to img

.img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}
相关阅读:
Top