title: Scale div width to an image width
body: <p>I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.</p>
  
  <p>Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
  Here is what I have so far in the HTML:</p>
  
  <pre><code>&lt;div id="main_container"&gt;
      &lt;div class="exercises"&gt;
          &lt;img class="bg" src="image.png"/&gt;
          &lt;div class="footer"&gt;
              &lt;ul class="buttons"&gt;
                  &lt;li&gt;Reset&lt;/li&gt;
                  &lt;li&gt;Next&lt;/li&gt;
                  &lt;li&gt;Sortie&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So: height is always == viewport, width is variable.
  I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
  I've read some posts here, but none were too related to my issue.</p>
  
  <p>edit: 
  I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:
  <a href="https://i.stack.imgur.com/5mbhs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5mbhs.png" alt="enter image description here"></a></p>