Clever Geek Handbook

Why is the Soo image small inside the table?

I need to figure out why the image is very small here. I need these images to be retina ready, so they are therefore 50%. Please confirm that I did it right.

<!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>
+3


source to share


2 answers


For setting an element width:50%

relative to the width of the parent container, not the width of the element itself, see the quick demo .

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




You can make the image at least x2 the size of the parent container, and then apply any of the CSS rules as needed for high pixel density displays such as Apple's retina display.

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

or img {width:100%; height:auto;}

+2


source


I know what you mean. You mean why is your photo so big (3000px) but you set 50% -> less than 1500px? Because 50% is 50% of the td width, not 50% of 3000px. Set width: 100% and you might know why



+1


source






More articles:


All Articles