Question

我有以下代码

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
img {
    object-fit: cover;
}
.ninja {
    font-family: Bebas Neue;
    font-size: 30px;
}

</style>
</head>
<body>
    <table style="width:80%">
        <tr>
        <th rowspan="3" width="50%" >
            <img style= display: "block" width="100%" height="100%" src="image.jpg" />
        </th>
        <td valign="top"><strong class= ninja>WHY WONT YOU LET IT GO</strong></td>
        </tr>
        <tr style="height: 0;">
            <td>55577855</td>
        </tr>
        <tr style="height: 0;">
            <td>55577855</td>
        </tr>
        <tr >
            <td>HAHAHAHA</td>
        </tr>
    </table>
</body>

问题在于，文本的所有位置都向下都有很大的空间，因为它们的总高度必须考虑图像的高度。我该如何反过来处理呢？我可以将图像最小化或缩小，这样文本就不会在内容的下方留长空格了。

如何使图像高度适合其旁边列的内容？

0 个答案: