HTML 侧面的图像高度相同

Question

我试图让侧面的图像与计算器保持相同的高度。 css 或 html 应该放在结构中的什么位置？我想保持纵横比尽可能接近

代码：http://jsbin.com/gijitaluta/edit?html,output

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
 <div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
  <form action="" method="post" id="theForm">
        <fieldset >
          <legend>Calculator</legend>
          <h4>Use this form to calculate the order total</h4>
            <div class="form-group">
              <label for="quantity">Quantity</label>
                <input class="form-control" id="quantity" type="number" value="1"/>
            </div>
            <div class="form-group">
                <label for="ppu">Price Per Unit</label>
                <input type="text" class="form-control" id="ppu" placeholder="1.00" required>
            </div>
            <div class="form-group">
                <label for="tax">Tax Rate (%)</label>
                <input type="text" class="form-control" id="tax" placeholder="0.0" required>
            </div>
            <div class="form-group">
                <label for="discount">Discount (%)</label>
                <input type="text" class="form-control" id="discount" placeholder="0.00" required>
            </div>
            <div class="form-group">
                <label for="ttl">Total</label>
                <input type="text" class="form-control" id="output" placeholder="0.00">
            </div>
            <div>
                <button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
            </div>
       </fieldset>  
 </form>
    </div>

  <footer class="footer">
    <h3>Copyright CSUN</h3>
</footer>
          </div>
</body>

</html>

Answer 1

这种方式使用了table。不需要太多改变。您需要一个移除了灰色边缘的图像版本，并且您必须使用填充 and/or 边距。

http://jsbin.com/xepiren/edit?html,css,output

td {
  background-color:#fff;
}
form {
  padding: 5%;
  /*width: 50%;*/
  font-family: 'Open Sans'
}

#theForm {
  background-color: white;
}

legend {
  color: red;
  font-size: 1.3em;
}

#maincontainer {
  margin: 5%;
}

fieldset {

}

img {
  /*width:30%;*/
  float: right;
  height: 430px
}

body {
  background-color: grey;
}

fieldset {
  padding: 10%;
}

#calculatorcontainer {
  margin: 10%; 
  border-style: solid;
  border-style: groove;
}

h4 {
  margin: 0px;
}

footer {
  padding: 10px;
  border-style: solid;
  border-style: groove;
}

footer h3 {
  color:red;
  font-size:80%
}
input {
  width: 90%
}

#submit {
  margin:10px
}


@media (max-width: 479px) {
  
  img {
  width:30%;
  float: right;
  height: 230px
}

  fieldset {
  padding: 0%;
  }
  form {
    font-size: 7px;
  }

  footer {
    padding: 7px;
  }
  footer h3 {
    color:red;
    font-size:10%
  }
}

@media (min-width: 1000px) {
  
    img {
  width:30%;
  float: right;
  height: 480px
}

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
  <div id="calculatorcontainer">
    <div id="maincontainer">      
      <table>
        <tr>
          <td>
            <form action="" method="post" id="theForm">
              <fieldset >
                <legend>Calculator</legend>
                <h4>Use this form to calculate the order total</h4>
                  <div class="form-group">
                    <label for="quantity">Quantity</label>
                      <input class="form-control" id="quantity" type="number" value="1"/>
                  </div>
                  <div class="form-group">
                      <label for="ppu">Price Per Unit</label>
                      <input type="text" class="form-control" id="ppu" placeholder="1.00" required>
                  </div>
                  <div class="form-group">
                      <label for="tax">Tax Rate (%)</label>
                      <input type="text" class="form-control" id="tax" placeholder="0.0" required>
                  </div>
                  <div class="form-group">
                      <label for="discount">Discount (%)</label>
                      <input type="text" class="form-control" id="discount" placeholder="0.00" required>
                  </div>
                  <div class="form-group">
                      <label for="ttl">Total</label>
                      <input type="text" class="form-control" id="output" placeholder="0.00">
                  </div>
                  <div>
                      <button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
                  </div>
             </fieldset>  
            </form>
          </td>
          <td>
            <aside class="imageContainer">
              <img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
            </aside>     
          </td>
        </tr>
      </table>
   </div><!-- End "maincontainer" -->

   <footer class="footer">
     <h3>Copyright CSUN</h3>
   </footer>
 </div>
</body>
 
</html>

HTML 侧面的图像高度相同

HTML image on side same height

html

css

height

col