为什么图像在表内这么小？答案

【问题标题】：Why is Image soo small inside table?为什么图像在表内这么小？
【发布时间】：2015-08-17 23:22:49
【问题描述】：

我需要找出为什么这里的图像真的很小。我需要这些图像准备好视网膜，所以这就是为什么它们是 50%。请确认我已正确执行此操作。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" width=
"700">
    <tr>
        <td class="leftColumnContent" valign="top" width="280">
            <!-- // Begin Module: Top Image with Content \\ -->

            <table border="0" cellpadding="20" cellspacing="0" style=
            "background-color: #eeeef9;" width="100%">
                <tr>
                    <td align="center" valign="middle" width="50%">
                        <div style="text-align:center;">
                            <h4 style="text-align:center;">DEL IKON</h4>
                            <hr style=
                            "height: 2px;background-color: black;border: 0;width: 160px;">


                            <p>På alle sider på hvisk.com – når<br>
                            du er logget ind – finder du i<br>
                            venstre side et ikon, hvor der står<br>
                            <strong>DEL</strong>. Når du trykker på
                            ikonet,<br>
                            kommer der en ’skuffe’ frem.</p>
                        </div>
                    </td>

                    <td align="center" valign="middle"><img src=
                    "https://gallery.mailchimp.com/54366e4388f5f1f871ed3d155/images/9de246f4-90cc-4185-b1b8-16b1b402b5e2.png"
                    style="width:50%;"></td>
                </tr>
            </table><br>
            <!-- // End Module: Top Image with Content \\ -->
        </td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

使用 width:50% 将尺寸减半，而不是增加图像分辨率。看看这个：stackoverflow.com/questions/16154494/…
最好使用媒体查询来检测像素比率并用它来更改图像 css 吗？
使用媒体查询允许您根据使用的设备加载正确的图像。通常视网膜图像比正常情况更重。

标签： html css mailchimp

【解决方案1】：

将元素设置为width:50% 是相对于父容器的宽度，而不是元素本身的宽度，请参阅quick demo。

&lt;img style="width:50%;" src="//dummyimage.com/100"/&gt;

您可以使图像至少是父容器大小的 x2 大小，然后根据需要为高像素密度显示器（例如 Apple Retina 显示器）应用任一 CSS 规则。

img {max-width:100%; height:auto;} 或 img {width:100%; height:auto;}

【讨论】：

目前图像可以跨越大约 3000 像素的宽度和高度，以便您了解。应用 50% 使它们变得非常小。
@Elevant 您的图像已经相当大（太大），只需将 50% 更改为 100%，一切都会好的 - jsfiddle.net/kt71jfx3
好的，所以我没有 Retina 设备来确认这一点，如果我将尺寸更改为 100%，它在普通设备上看起来不错。 Retina 屏幕应该没问题吧？
@Elevant Keep High-Density Displays from Uglifying Your Emails

【解决方案2】：

我知道你的意思。你的意思是为什么你的图片这么大（3000px）但你设置了 50% --> 小于 1500px？因为 50% 是宽度 td 的 50%，而不是 3000px 的 50%。请设置宽度：100%，也许你知道为什么

【讨论】：

如果我用这个方法确定它看起来不错，但是视网膜屏幕呢？
你能向我解释更多关于“视网膜屏幕”的信息吗？我不明白你的意思。
都是像素密度为2的屏幕。