I am trying to achieve the display of an image centered within the entire browser window with a few conditions in place. If the image can fit within the browser's client area, it should be displayed at its original size. If the image is too tall or too wide for the browser window, then it needs to be scaled down accordingly. Additionally, if the user resizes the browser window, the image should adjust accordingly by either scaling down (if too large) or maintaining no larger than its original size.
While I currently have a solution using jQuery, I am curious to know if this functionality can also be implemented using CSS alone?
EDIT:
The closest attempt I have made so far is shown here:
https://jsfiddle.net/Deepview/o5vgo6du/
html
<div class="outerCont"> <img src="http://www.wonderslist.com/wp-content/uploads/2015/10/Doutzen-Kroes-Most-Beautiful-Dutch-Woman.jpg" /> </div>
css:
.outerCont {
position: relative;
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
height: auto;
width: auto;
}
However, the issue I am facing is that the image does not center vertically as desired.