I am trying to find a way to make an image responsive by the browser window's changing HEIGHT, not width.
So when you make the browser window more narrow, without changing the (let's say full) height, the image will shrink to fit. But if you do the opposite and make the full width window shorter, the image won't scale--unless it's the only thing on the page.
Is there a way to do this? See https://www.harryorlyk.com/portfolio/studio-yard/ I have a media query so that at 1024px the height of the image reduces, but I was hoping for something that would automatically change it's height based on browser window height.
I have tried variations of:
.postid-5582 img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
.postid-5582 img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
.postid-5582 {max-height:100vh;max-width:100vw;}
and a couple of javascripts:
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
basically everything on this page: https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window
thanks!