如何在表

Question

在我的项目中，我有四张照片。

当页面加载成功时，可以逐个显示这些图片。

现在我因为这四张照片的尺寸不一样而感到麻烦，因为这些照片的原始尺寸不同

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

这是我的HTML代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想定义每张图片的大小是宽度：400px身高：400px，谁能帮帮我？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加max-height，max-width

  <tr style="height:80px">
    <td>
    <div style="float:left">
    <span>
      GovenmentCloudStruct
     </span>
     </div>
     <div style="float:left">
     <img style="max-height:400px;max-width:400px;" src="pic/govCloud.jpg" >
     </div>
    </td>
  </tr>

Answer 3

首先，添加样式img {width: 400px; height: 400px;}，然后将相同的高度和宽度设置为img标记，如：

<img src="pic/officeBS.jpg" width="400" height="400" style="width: 400px; height: 400px;">

希望，这会对你有帮助。