css to fit image by HEIGHT

Question

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!

Answer 1

Try giving your image a max-width instead of max height.

img
{
width:100%;
max-width:500px; /* this will stop it from expanding when you widen the browser
height:auto; /* height will automatically adjust to width.
}

You didn't give any specifications on if you image is a square or nested in a square div, but if it's a div, you can give the div a 100% width and a padding-bottom of 100% or 50% to make it a square. If this is the case please reply and I'll be happy to help again

Here is a code pen https://codepen.io/BramWerink/pen/GRpvgaB