Currently, I am utilizing html5-fullscreen mode along with a full-screen parent div. My goal is to vertically center an image within this parent div, but only if the image is smaller than the parent div (i.e., the screen size). Additionally, I aim to restrict the image's max-height to 100% of the parent to prevent zooming in if the image exceeds the screen dimensions.
I have managed to center the image using two divs—one with display:table, and the other with display:table-cell. However, I encountered difficulty when trying to simultaneously set the image's max-height not to exceed that of the parent div. While I can achieve the latter by using
position:absolute; max-height:100%;Here is an example of the markup:
<div id="fullscreen-container">
<div id="fullscreen-img-wrapper">
<img id="fullscreen-img" src="/images/test-6000x4000.png" />
</div>
</div>
If you have any suggestions on how to tackle this issue, please feel free to share! Your input is highly valued.