CODEWITHSUNDEEP
htmlcss
stack
stack

Reputation: 841

How to fix picture size in table

In my project, I have four pictures.

Theses pictures can be displayed one by one when page is loading successfully.

Now I am in trouble for these four picture's size is not the same because these pictures have different original size

I have tried to define height of each tr, but it works fail.

Here is my html code:

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

I want to define each picture size is width:400px height:400px, who can help me ?

Upvotes: 0

Views: 95

Answers (3)

Kaustavi Banerjee
Kaustavi Banerjee

Reputation: 47

First, add in style img {width: 400px; height: 400px;} then set same height and width into img tag, like:

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

Hope, this will help you.

Upvotes: 0

Jyme
Jyme

Reputation: 342

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

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

Simply set the width and height on img in your CSS:

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>

Upvotes: 1

Related Questions