I am attempting to implement a specific scaling effect using CSS. Below is an illustration of what I am aiming for: An image positioned 300px from the top of the browser page, with static text above it. The challenge is to ensure that the image scales proportionally with the browser without cutting off the bottom or requiring scrolling to view the entire image.
The visual below represents the browser window, which also has the option to go fullscreen, necessitating the ability for the image to scale accordingly.
I have experimented with setting width to 100% and height to auto on the img tag, but it did not achieve the desired result.
The following code snippet somewhat addresses the issue, but when adjusting the position of the image to accommodate the top text, the bottom of the image still gets cut off. I need the image to scale up to the bottom of the browser window.
#photo-container{
margin-top: 200px;
img{
min-height: 720px;
max-height: 100%;
height: 100%;
width: auto;
}
}
If achieving this effect via CSS is not feasible, would integrating a JavaScript solution be a viable option?