注册 登录
编程论坛 → WEB前端(UI)

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

nybdx 发布于 2025-04-28 08:30， 8764 次点击
请看图片，就是做一个html页面在页面的表格中的右上角部分放照片，照片是295x413像素，保持照片的宽高比不变让照片充满那个小区域，照片的文件名为zpzq.jpg，路径是D:\photo_ks，页面的大小按A4纸大小，表格的左右边距各保持0.5厘米，请给出完整的html代码，谢谢了！
只有本站会员才能查看附件，请 登录


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

4 回复
#2
yiyanxiyin2025-04-28 15:19
程序代码：
<!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
nybdx2025-04-28 19:08
谢谢！照片太大了，你发的列宽平均了，请按图示的比例提供一个好吗？
#4
yiyanxiyin2025-04-29 10:29
程序代码：
<!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
nybdx2025-04-30 08:02
谢谢！照片没有缩小，把前3行撑高了，向有段也突破表格边界了
1
©2025, BC-CN.NET
电脑版