求助：如图，请大家帮忙看看这个页面怎么做？ - WEB前端(UI)

问题点数：20 回复次数：4

求助：如图，请大家帮忙看看这个页面怎么做？

请看图片，就是做一个html页面在页面的表格中的右上角部分放照片，照片是295x413像素，保持照片的宽高比不变让照片充满那个小区域，照片的文件名为zpzq.jpg，路径是D:\photo_ks，页面的大小按A4纸大小，表格的左右边距各保持0.5厘米，请给出完整的html代码，谢谢了！

图片附件: 游客没有浏览图片的权限，请登录或注册

[此贴子已经被作者于2025-4-28 08:32编辑过]

第 2 楼

得分:0

程序代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    @page {
      size: A4;
      margin: 0.5cm;
    }

    body {
      margin: 0.5cm;
      padding: 0;
      width: 210mm;
      /* A4宽度 */
      height: 297mm;
      /* A4高度 */
    }

    .a4-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .a4-table tr {
      height: 25px;
    }

    .a4-table td {
      border: 1px solid #000;
      padding: 5px;
      vertical-align: top;
    }

    .image-cell {
      width: 295px;
      height: 413px;
      text-align: center;
    }
  </style>
</head>

<body>
  <table class="a4-table">
    <tr>
      <td></td>
      <td></td>
      <td rowspan="15" class="image-cell">
        <img src="D:\photo_ks\zpzq.jpg" alt="图片" style="width:295px;height:413px;object-fit:contain;">
      </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
  </table>
</body>

</html>

第 3 楼

得分:0

谢谢！照片太大了，你发的列宽平均了，请按图示的比例提供一个好吗？

第 4 楼

得分:0

程序代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    @page {
      size: A4;
      margin: 0.5cm;
    }

    body {
      margin: 0.5cm;
      padding: 0;
      width: 210mm;
      /* A4宽度 */
      height: 297mm;
      /* A4高度 */
    }

    .a4-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .a4-table tr {
      height: 35px;
    }

    .a4-table td {
      border: 1px solid #000;
      padding: 5px;
      vertical-align: top;
    }

    .image-cell {
      width: 295px;
      height: 413px;
      text-align: center;
    }
    .a4-table td:first-child, .a4-table td:last-child{
      width: 20%;
    }
  </style>
</head>

<body>
  <table class="a4-table">
    <tr>
      <td></td>
      <td></td>
      <td rowspan="5" >
        <img src="D:\photo_ks\zpzq.jpg" alt="图片">
      </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td> </td>
      <td colspan="2"> </td>
    </tr>
  </table>
</body>

</html>

第 5 楼

得分:0

谢谢！照片没有缩小，把前3行撑高了，向有段也突破表格边界了