在单个表格元素中调整图像高度

Question

我正在尝试调整表格中的图像大小。有两幅图像并排在一起。我需要左边那个的大小大约是右边那个的50%

我该怎么做呢?当我尝试在代码的任何地方添加一个height元素时，它不会显示出来，要么height="一些数字"或者height="某个数字%"我可以把图片从表格中拿出来，但是这样看起来就很乱了。

代码粘贴在下面，任何建议将不胜感激。由于

<table class="rspnsv" width="620" align="center" cellpadding="0" cellspacing="0" border="0" border-spacing="0" border-collapse="collapse">
<tbody class="rspnsv" width="620" align="center" cellpadding="0" cellspacing="0" border="0" border-spacing="0" border-collapse="collapse">
<td class="rspnsv" width="300" align="center" cellpadding="0" cellspacing="20" border="0" border-spacing="0" border-collapse="collapse">
<img class="picture" width="300" src="edm/2.jpg">
</td>
<td class="rspnsv" width="20" height="20" align="center" cellpadding="0" cellspacing="20" border="0" border-spacing="0" border-collapse="collapse"></td>
<td class="rspnsv" width="300" align="center" cellpadding="0" cellspacing="20" border="0" border-spacing="0" border-collapse="collapse">
<img class="picture" width="300" src="edm/3.jpg">
</td>
</tbody>
</table>

Answer 1

如果你说左边图片的大小应该是右边图片的50%，那就意味着右边图片的大小是右边图片的两倍。

你可以用flexx或css-grid来实现。css-grid方法是创建一个3列的网格。左边的图片跨越1列，而右边的图片跨越2列和2行，因此将是两倍的大小。

.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.image-grid img {
width: 100%;
}
.image-grid :nth-child(2) {
grid-column: span 2;
grid-row: span 2;
}

<section class="image-grid">
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
</section>

flexbox方法更简单，并且与IE的兼容性更好。第一张图片的宽度为33%，右边图片的宽度为66%。要使较小的图像不对齐到垂直中心，您可以使用:align-self: flex-start;.

.image-grid {
display: flex;
}
.image-grid img {
object-fit: contain;
}
.image-grid :nth-child(1) {
width: 33.33%;
align-self: flex-start;
}
.image-grid :nth-child(2) {
width: 66.66%;
}

<section class="image-grid">
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
</section>