title: How to make an image not scroll?
body: <p>I would like to know how to make an image not scroll with the rest of the page. However, I want the image to be a certain percentage of width, and the browser automatically figure out the heightto display the image, and the image height automatically configured also determines the parent div's height.</p>
  
  <p>The following code allows me to position the image area nicely and size the actual image nicely:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.popPictureParent {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
  .popPicture {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }
  
  .popPicture img {
    display: block;
    width: 100%;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="popPictureParent" id="picture1"&gt;
    &lt;div class="popPicture"&gt;
      &lt;img src="./files/painting_scene_smaller.png" alt="painting scene" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How would I make the image not sccroll similar to this website: <a href="https://www.thediyjoint.com/" rel="nofollow noreferrer">https://www.thediyjoint.com/</a> but have the image size and position the divs how I have it right now? I have other things on the website that it has to not intrude, this isn't the only thing, so.</p>
  
  <p>I've tried the background image thing, using fixed, absolute, but neither work. I need the browser to do some math to make the image look nice based on a width percentage given.</p>
  
  <p>When I try the background, there isn't an option to set the parent's div width to what the background needs. This is really convoluted to me. If more information is needed, please comment.</p>
  
  <p>EDIT: the thing is, I need the image to serve as a width and height placeholder, so the parent div sizes to it. The background image doesn't give a placeholder. Also, I need the image to not show up outside of its parent div.</p>