Check out my HTML code:
<!DOCTYPE html>
<html lang="en">
<head><link href="test.css" rel="stylesheet"></head>
<body>
<div class="outer">
<div class="inner">
<img src="test.png">
</div>
</div>
</body>
</html>
Here's the CSS I'm using:
.outer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
.inner {
width: auto;
margin: auto;
}
.inner > img {
width: auto;
max-width: 100%;
}
This snippet is a simplified version of the code I'm implementing within Bootstrap's modal.js to showcase images after clicking on thumbnails.
I want the image to be centered on the viewport in a responsive way - showing its true dimensions unless the viewport is smaller than either dimension, at which point it should resize accordingly.
The outer div usually matches the dimensions of the viewport, which is effective.
Although the image has width: auto; max-width: 100%; for responsiveness to the viewport width, it doesn't adjust to the height. Including max-height: 100%; doesn't have an effect.
Currently, the inner div aligns with the left of the viewport unless provided with a specific width.
Adding display: table to the .inner centers the div, but inhibits responsiveness to changes in viewport width.
So, how can I center the inner div while making it responsive to both width and height of the viewport without cropping or distorting the aspect ratio of the image?
Is achieving this behavior solely through CSS, HTML, and Bootstrap impossible, or would it necessitate custom JS? I lack sufficient knowledge in JS to confidently code this myself, thus hoping there's a clever CSS trick that accommodates these conflicting requirements based on viewport size.
Tagging Twitter's Bootstrap because I intend to utilize it in conjunction with Bootstrap's JS plugins for any potential solutions.
EDIT: Just to clarify, I need to center the inner div as a whole, not just the image within it.