html - 如何制作图像表

Question

我正在尝试制作一个包含连续三张图片且所有图片大小相同的表格。我在文件中的图片大小不一，甚至不是直立的。有没有办法让每张图片都一样宽，高，变换，在一条线上？到目前为止，这是我的代码。此外，出于某种原因，它只会使第一个 img 的样式与其他样式不同。谢谢!

CSS

      #pics {
        margin-top: 8%;
      }

      #pics td {
        height: 100px;
        padding-top: .5em;
        padding-bottom: 5em;
      }

      #pics img {
        margin-left: 5%;
        margin-right: 5%;
        height: 90%;
        border: 5px #72dbd4 solid;
        transform: rotate(90deg);
        display: inline;
      }

      #cliffPano {
        width: 90%;
      }

HTML

      <table id="pics">
        <tr>
          <td><img src="blogPics/battleship.JPG" /></td>
          <td><img src="blogPics/PHMemorial.JPG" /></td>
          <td><img src="blogPics/roadToHana.JPG" /></td>
        </tr>
        <tr>
          <td><img src="blogPics/hawaiiTree.jpg" /></td>
          <td><img src="blogPics/hawaiiOcean.JPG" /></td>
          <td><img src="blogPics/planeHawaii.JPG" /></td>
        </tr>
        <tr>
          <td><img id="cliffPano" style="transform: rotate(0deg);"src="blogPics/cliffPano.jpg" /></td>
        </tr>
      </table>

Answer 1

要使所有图像的大小相同，您可以在 CSS 中设置它们的特定像素值:

#pics img {
    height: 100px;
    width: 50px;
    ...
}

CSS 转换可能不会执行您想要的操作。我建议您首先自己旋转所有图像文件。