I am seeking guidance regarding two specific questions. My objective is to showcase an image in its true size while positioning it at the horizontal center of the screen (not the exact center), followed by a div containing text directly underneath the image. The code snippet I have implemented is displayed below:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
The corresponding CSS used for this implementation is as follows:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
Now, I have encountered two key issues. Firstly, when the height of the image surpasses the height of the screen, no vertical scrollbar appears and instead the image is automatically resized to fit the screen. Secondly, I am unsure how to position the text beneath the image without prior knowledge of the image dimensions. I attempted using figcaption but unfortunately that solution did not prove successful.