After an image there is extra space in HTML-CodePudding

I tried adding an image to the table data, but it turned out to be very small and took up a lot of space. I also need to only use HTML for this challenge. Image size for a calculator is 400x300 (heigh and width).

my outputenter image description here expected outputenter image description here

my code

<html>
  <body>
    <table border="1">
      <tr>
        <td>
          <form action="">
            <table cellpadding="3">
              <tr>
                <td colspan="2" align="center">
                  <font size="20" color="blue">Calculator</font><br />
                </td>
              </tr>
              <tr>
                <td align="center" colspan="2">
                  <img src="calculator.jpg" height="300" width="400" />
                </td>
              </tr>
              <tr>
                <td><label for="">Input1</label></td>
                <td><input type="number" name="input1" /><br /></td>
              </tr>
              <tr>
                <td><label for="">Input2</label></td>
                <td><input type="number" name="input2" /><br /></td>
              </tr>
              <tr>
                <td><label for="">Select Operation</label></td>
                <td>
                  <select name="operation">
                    <option value="Select..">Select..</option>
                    <option value="ADD">ADD</option>
                    <option value="SUBTRACT">SUBTRACT</option>
                    <option value="MULTIPLY">MULTIPLY</option>
                    <option value="DIVIDE">DIVIDE</option></select
                  ><br />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="image"
                    name="submit"
                    img
                    src="calc.jpg"
                    alt="Submit"
                    height="80"
                    width="80"
                  />
                </td>
                <td>
                  <input
                    type="image"
                    name="reset"
                    img
                    src="reset.jpg"
                    alt="Reset"
                    height="80"
                    width="80"
                  />
                </td>
              </tr>
            </table>
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

CodePudding user response：

I think that problem is associated with Your image as I did code pen on it. With another image. It worked Fine. https://codepen.io/ash_000001/pen/abVqXxq?editors=1000

<html>
  <body>
    <table border="1">
      <tr>
        <td>
          <form action="">
            <table cellpadding="3">
              <tr>
                <td colspan="2" align="center">
                  <font size="20" color="blue">Calculator</font><br />
                </td>
              </tr>
              <tr>
                <td align="center" colspan="2">
                  <img src="https://media.istockphoto.com/vectors/mobile-phone-vibrating-or-ringing-flat-vector-icon-for-apps-and-vector-id1141778521?k=20&m=1141778521&s=612x612&w=0&h=HR00_7snTNcWcsXAFuzcVPTPnU--qT8R6H-ve4lG2m8=" height="300" width="400" />
                </td>
              </tr>
              <tr>
                <td><label for="">Input1</label></td>
                <td><input type="number" name="input1" /><br /></td>
              </tr>
              <tr>
                <td><label for="">Input2</label></td>
                <td><input type="number" name="input2" /><br /></td>
              </tr>
              <tr>
                <td><label for="">Select Operation</label></td>
                <td>
                  <select name="operation">
                    <option value="Select..">Select..</option>
                    <option value="ADD">ADD</option>
                    <option value="SUBTRACT">SUBTRACT</option>
                    <option value="MULTIPLY">MULTIPLY</option>
                    <option value="DIVIDE">DIVIDE</option></select
                  ><br />
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="image"
                    name="submit"
                    img
                    src="calc.jpg"
                    alt="Submit"
                    height="80"
                    width="80"
                  />
                </td>
                <td>
                  <input
                    type="image"
                    name="reset"
                    img
                    src="reset.jpg"
                    alt="Reset"
                    height="80"
                    width="80"
                  />
                </td>
              </tr>
            </table>
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

CodePudding user response：

Use CSS to tell the system what size you want the image to be and that you want all the image to be visible, whatever its aspect ratio compared to the size of space you can give it.

For example for a space with height 400px and width 300px:

<img src="calculator.jpg" style="height: 400px; width: 300px;object-fit: contain;">