title: html image auto adjust size of div
body: <p><img src="https://i.stack.imgur.com/euzKF.png" alt="Example"></p>
  
  <p>The number of checkboxes can extend to like 40. If that happends, the scroll bar works and you can scroll to the right.
  But i want that the image also adjust itself to that length. 
  So right now if i scroll to the right the image automatically stops.</p>
  
  <p>Also when there are only 2 checkboxes, i want the train to be that smal. (So i just want the image to adjust to the length of the checkboxes.</p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;div id="axle_bogie_border"&gt;
      &lt;!--This is the train image--&gt;
              &lt;img src="Images/axle_train.png" alt="train"&gt;
          &lt;!--The show axles are the number of checkboxes (Filled in by a user)--&gt;
          &lt;div id="show_axles"&gt;
              &lt;?php  
                  $_POST['number_of_axles'];
                      if(isset($_POST['number_of_axles'])){
                      for($i=0; $i&lt;$_POST['number_of_axles']; $i++){
                          echo "Axle " . "$i " . "&lt;input type='checkbox' name='axles[$i]'&gt;";
                      }   
                  }
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#axle_bogie_border {
      border: 2px solid black;
      width: 98%;
      height: auto;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      display: inline-block;
  }
  
  #axle_bogie_border img {
      width: 100%;
      height: 200px;
  }
  </code></pre>
  
  <p>The show axles div has no content yet.</p>
  
  <p>This is a example of how it looks now:</p>
  
  <p><img src="https://i.stack.imgur.com/YA13T.png" alt="Website example now"></p>
  
  <p>And as you can see the train does not continue after a certain length.</p>