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转换可能不会做你想要的。我建议你先自己旋转所有的图像文件。

Answer 2

一个有用的方法是你学习一点PHP。有了它，您可以创建相同的拇指图像预览。这是确切的php函数链接ref：http://php.net/manual/en/function.imagecopyresampled.php

这属于php GD和图像函数库，它更有可能。这样你就可以真正解决这个问题

如何制作图像表

2 个答案: