Image shrinks when resizing browser's height but not when resizing the width

Question

I'm trying to make it so that the height is restricted to the height of the device the image is viewed on so that you can view the entire image without having to scroll down.

To accomplish this I've used:

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 1240px;
}

So if the image is 500x1000 px, it'll take 92vh height and if it's 1000x500, it'll have width of 1240px and height (most probably) less than 92vh.

The problem with that is that if I resize the height of the browser the image scales down, however, if I scale the width, my browser will cut part of the image and I'll have to scroll horizontally to see the full image.

Not sure how to get the best of both worlds.

https://codepen.io/BozhidarSK/pen/NBKyyW

 .specific-image-flex-container { display: flex; } .specific-image-column { flex: 4; } .specific-image-container-element { text-align: center; position: relative; display: inline-block; width: 100%; } .specific-image { display: block; max-height: 92vh; max-width: 1240px; } .stickySpecificContainer { position: relative; z-index: 2; display: inline-block; } 

 <div class="specific-image-flex-container"> <div class="specific-image-column"> <div class='specific-image-container-element'> <div class="stickySpecificContainer"> <img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' /> </div> </div> </div> </div> 

Answer 1

You want the image to be maximum 100% wide by default and 1240px if the screen is wider than 1240px. You can achieve the desired result using media queries:

 body { margin: 0; } .specific-image { display: block; max-height: 92vh; max-width: 100%; } @media screen and (min-width: 1240px) { .specific-image { max-width: 1240px; } } 

 <img class="specific-image" src="https://dummyimage.com/1600x600/000/fff"> 

Same demo with square image:

 body { margin: 0; } .specific-image { display: block; max-height: 92vh; max-width: 100%; } @media screen and (min-width: 1240px) { .specific-image { max-width: 1240px; } } 

 <img class="specific-image" src="https://dummyimage.com/600x600/000/fff"> 

Answer 2

give max-width:100% to the image instead of the pixel value, the percentage value will make sure that max width of the image 100% of the document.

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 100%
  }

 .specific-image-flex-container { display: flex; } .specific-image-column { flex: 4; } .specific-image-container-element { text-align: center; position: relative; display: inline-block; width: 100%; } .specific-image { display: block; max-height: 92vh; max-width: 100%; } .stickySpecificContainer { position: relative; z-index: 2; display: inline-block; } 

 <div class="specific-image-flex-container"> <div class="specific-image-column"> <div class='specific-image-container-element'> <div class="stickySpecificContainer"> <img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' /> </div> </div> </div> </div> 

Answer 3

92vh is 92% of the view height. vw is used for view width.

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 92vw;
}