Question

我需要找出为什么这里的图片真的很小。我需要这些图像准备好视网膜，这就是为什么它们达到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>

Answer 1

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

<img style="width:50%;" src="//dummyimage.com/100"/>

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

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

Answer 2

我知道你的意思。你的意思是为什么你的照片是如此之大（3000px），但你设置50％ - ＆gt;小于1500px？因为50％是宽度td的50％，而不是3000px的50％。请设置宽度：100％，也许你知道为什么

为什么桌面内的Image太小了？

2 个答案: