0

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!

  • Have you tried using vmin/vmax? – Joel Hager Apr 28 at 22:02
  • I just looked at your example, and that's a horrible way to do it, as it's not preserving the aspect ratio, meaning it 'squishes' the image to make it fit. Are you sure that's what you want to happen? – Joel Hager Apr 28 at 23:29
  • yeah no kidding. i tried a few ways using vmax (and height: auto) and left for a few hours. just got back and see what you mean... It doesn't have any mods on it now so back to square one. – user3106358 Apr 29 at 1:23
  • Can you better explain what you're trying to do? I honestly think you should use the scale property to keep the aspect ratio and just start cropping in if it gets too small. – Joel Hager Apr 29 at 1:27
  • is this even feasible considering its not the only thing on the page (ie text above and below)? – user3106358 Apr 29 at 1:27
0

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

| improve this answer | |
  • thank you for that. The question is, how to get the width to react to changing the HEIGHT of the browser window. The image is in a container div but that contains all the rest of the page content (this is a wp site). I am thinking more and more that it's just not possible, esp with content below. – user3106358 Apr 29 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.