可变高度的行跨度图像，因此文本始终均匀分布

Question

我正在为照片库创建一个显示页面。该页面将有 4 个照片属性 - 文件名、标题、拍摄日期和摄影师姓名，以及照片本身的预览缩略图。我试图实现一致的外观，但不幸的是图像有横向和纵向，所以虽然横向图像看起来一致，但纵向图像会拉长属性行之间的距离，因此会弄乱外观。

我的示例代码如下，JSFiddle 上的代码位于此处 - https://jsfiddle.net/tsmolskow/37hkszbq/61/

HTML 代码：

<style>

.right-Padding{
   padding-right: 10px; 
}
img.resize {
   width: 50%;
   height: 50%;
   max-height: 125px;
}

</style>
<table style='font-size:15px'>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='5'><a href='" + href + "'><img class='resize' align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Title</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='6'><a href='" + href + "'><img class='resize' align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

</table>

CSS 代码：

.right-Padding{
 padding-right: 10px; 
}
img.resize {
    width: 50%;
    height: 50%;
    max-height: 125px;
}

Answer 1

首先，您的第一张图片的行跨度为 6，应该是 4。为您的图片设置最大高度，我将其设置为 90 像素。然后从带有图像的<td> 单元格中删除 25% 的宽度和高度声明。最后，你必须使用表格吗？如果你需要表格布局，你真的应该使用 CSS Grid。

table{
   width:100%;
}
td{
   border:solid 1px #000;
}
img{
   max-height:90px;
   
}

<table style='font-size:15px'>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
    <td rowspan='4'>
      <a href='" + href + "'>
        <img  align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'>
      </a>
    </td>
  </tr>
  <tr>
    <td width='50%' style='padding-right: 10px;'>Image Tile</td>
  </tr>
  <tr>
    <td>Image Date Taken</td>
  </tr>
  <tr>
    <td style='padding-right: 10px;'>Image Taken By</td>
  </tr>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
<td rowspan='6'><a href='" + href + "'><img  align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' style='padding-right: 10px;'>Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td style='padding-right: 10px;'>Image Taken By</td></tr>

</table>