I am seeking a way to prevent an image from scrolling along with the rest of the page. I want the image to occupy a specific percentage of width, while allowing the browser to determine the appropriate height for display. The image's height should also influence the height of its parent div.
The code below assists me in aligning the image area and sizing the actual image effectively:
.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;
}<div class="popPictureParent" id="picture1">
<div class="popPicture">
<img src="./files/painting_scene_smaller.png" alt="painting scene" />
</div>
</div>How can I achieve a non-scrolling image similar to what is seen on this website: , while maintaining the current styling and positioning of the div elements? It is important that the image does not interfere with other content on the website, hence my specific requirements.
I have experimented with using background images with fixed or absolute positioning, but neither option has yielded the desired outcome. I require the browser to calculate the dimensions of the image based on the specified width percentage.
When attempting to use a background image, there seems to be no straightforward method to adjust the parent div's width according to the image size. This process feels overly complex to me. Feel free to request more information if needed.
EDIT: It is crucial that the image functions as a placeholder for both width and height, shaping the parent div accordingly. Background images do not serve this purpose effectively. Additionally, the image must not extend beyond the boundaries of its parent div.