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!

9
  • Have you tried using vmin/vmax?
    – Joel Hager
    Apr 28, 2020 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, 2020 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.
    – plushjudy
    Apr 29, 2020 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, 2020 at 1:27
  • is this even feasible considering its not the only thing on the page (ie text above and below)?
    – plushjudy
    Apr 29, 2020 at 1:27

1 Answer 1

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

1
  • 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.
    – plushjudy
    Apr 29, 2020 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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