Question

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

我该怎么做？当我尝试向代码中的任何位置添加高度元素时，它不会显示，无论是 height="some number" 还是 height="some number %"。我可以将图片从表格中取出，但随后事情开始变得混乱。

下面粘贴的代码和任何建议将不胜感激。谢谢

<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%，那就意味着右边的图片大小是右边的两倍。

您可以使用 flexbox 或 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>

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

1 个答案: