My goal is to have a vertical image fill 100% of its div container when the page loads. Everything works perfectly until I inspect the page or resize the browser window, causing the image to shrink proportionally.
CSS:
body {width: 100%; height: 100%};
.container {width: 50%; height: 100%; position: relative};
.bkg-image {
background: url("../img/image.jpg");
background-position: right top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
height: 100%;
min-height: 500px;
width: 100%;
left: 0px;
top: 0px;
}
HTML
<body>
<div class="container">
</div>
<div class="container">
<div class="bkg-image"></div>
</div>
</body>
Initially, I used jQuery to set the image height in pixels instead of percentage once the page loaded. This method worked well, but if the user resized the browser window after loading, the image height remained fixed and did not adjust to its container. So, my question is:
Is it possible to maintain the initial functionality, where the image adjusts its height dynamically, even when the browser window is resized?
- If the browser window is enlarged, convert the height back to 100%, then revert to pixels after resizing is complete.
- If the browser window is shrunk, stick with the existing jQuery solution.
Is there a way to achieve this desired behavior?