对齐 HTML 个表格中的图像

Question

我有一个 1x2 HTML table 将用作电子邮件的标题。第一列包含链接图像，第二列包含标题。

        <table>         
        <tr>
            <td width="50%" style="text-align:left; padding-left:10%;">
                <a target="_blank" href="http://www.google.com/">
                    <img src="img/logo.jpg" alt="Logo" 
                    style="width:30%; height:30%;"
                     />
                </a>
            </td>

            <td width="50%" style="text-align:right; padding-right:10%;">
                <h2>Order Confirmation</h2>
            </td>
        </tr>
    </table>

如您所见，左侧单元格中的图像左对齐，右侧单元格中的标题右对齐，每个元素距边缘 10% space（填充）。

问题：图像的尺寸被扭曲了！我将 img 的宽度和高度都设置为 30%，但它仍然会变形。我猜这与 table 有关，但我无法弄清楚。让我知道！

ps：我必须为这个项目使用内联样式和 tables。

Answer 1

如下SO中提到的{Resize image proportionally with CSS?}

您不应该尝试限制两个尺寸，而只是将宽度设置为 30%，将高度设置为 'auto'。试一试。

对齐 HTML 个表格中的图像

Aligning images in HTML tables

html

css

html-table

image

alignment