css to fit image by HEIGHT

admin管理员组

文章数量:1287491

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 / 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:

thanks!

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/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/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window

thanks!

• images
• css

Share Improve this question edited Apr 29, 2020 at 5:37 Chetan Vaghela 2,39844 gold badges1010 silver badges1616 bronze badges asked Apr 28, 2020 at 18:54 plushjudyplushjudy 2166 bronze badges 9

• Have you tried using vmin/vmax? – Joel Hager Commented 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 Commented 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 Commented 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 Commented 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 Commented Apr 29, 2020 at 1:27

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 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

本文标签： css to fit image by HEIGHT