html - 如何固定表格中的图片大小

Question

在我的元素中，我有四张图片。

当页面加载成功时，这些图片可以一张一张地显示出来。

现在我遇到麻烦了，因为这四张图片的尺寸不一样，因为这些图片的原始尺寸不同

我试图定义每个 tr 的高度，但它失败了。

这是我的 html 代码:

<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
		  CompanyNetworkStruct
		 </span>
      </div>
      <div style="float:left">
        <img src="pic/nsccnetwork.jpg">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
		  GovenmentCloudStruct
		 </span>
      </div>
      <div style="float:left">
        <img src="pic/govCloud.jpg">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
		 PublicCloudStruct
		 </span>
      </div>
      <div style="float:left">
        <img src="pic/publicCloud.jpg">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
		 ScienctBNetWorkStruct
		 </span>
      </div>
      <div style="float:left">
        <img src="pic/officeBS.jpg">
      </div>
    </td>
  </tr>
</table>

我想定义每张图片的尺寸是width:400px height:400px，谁能帮帮我？

Answer 1

只需在 CSS 中的 img 上设置 width 和 height:

img {
  width: 400px;
  height: 400px;
}

<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
      CompanyNetworkStruct
     </span>
      </div>
      <div style="float:left">
        <img src="http://placehold.it/100">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
      GovenmentCloudStruct
     </span>
      </div>
      <div style="float:left">
        <img src="http://placehold.it/100">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
     PublicCloudStruct
     </span>
      </div>
      <div style="float:left">
        <img src="http://placehold.it/100">
      </div>
    </td>
  </tr>
  <tr style="height:80px">
    <td>
      <div style="float:left">
        <span>
     ScienctBNetWorkStruct
     </span>
      </div>
      <div style="float:left">
        <img src="http://placehold.it/100">
      </div>
    </td>
  </tr>
</table>