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>

But that just makes the image have width of 40% of parent element? That doesn't solve anything. — Onyx, Jul 09 '18 at 15:17
Are you saying you want the image to be no taller than the browser height AND no wider than the browser width? — G Cadogan, Jul 09 '18 at 15:18

Salman A · Accepted Answer · 2018-07-09T21:35:31.940

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">

score 0 · Answer 2 · answered Jul 09 '18 at 15:20

0

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>

answered Jul 09 '18 at 15:20

Jismon Thomas

783
1
6
22

This fixed the problem I had with the scaling, however, this way my image can have a width of over 1240px? Is there any way to keep the responsiveness by using % and still restrict max-width to 1240px? – Onyx Jul 09 '18 at 15:27
hi Bobimaru, the image width won't go over the original width unless you specify it that way, so using 100% is the best way to make sure that the image will stay responsive. – Jismon Thomas Jul 09 '18 at 15:31
You could try width: 100%; max-width: 1240px; – wiiiiilllllll Jul 09 '18 at 15:36
Hmmm, after adding width: 100%; max-width: 1240px, the image stretches unproportionally if I resize the height of the browser. – Onyx Jul 09 '18 at 15:39
@wiiiiilllllll, that is not going to work, width 100% will stretch the image – Jismon Thomas Jul 09 '18 at 15:40
Is it even possible to accomplish what I'm asking? Should I just pick one of the other variations. – Onyx Jul 09 '18 at 15:49
hi Bobimaru, what other solutions are you looking for, this answer did not work for you ? – Jismon Thomas Jul 09 '18 at 15:51
if you are not sure about this, take a look here: https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Jismon Thomas Jul 09 '18 at 15:52
It works if I wanted to have max-width of 100%, however, I need to have max-width of 1240px while still keeping responsiveness. Obviously your answer is second best to what I want and if I don't find a solution to my problem, I'd use it. – Onyx Jul 09 '18 at 15:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174666/discussion-between-jismon-thomas-and-bobimaru). – Jismon Thomas Jul 09 '18 at 16:03
Sorry for the delay, unexpected chore came up. Are you still up for a chat? – Onyx Jul 09 '18 at 16:50

score 0 · Answer 3 · answered Jul 09 '18 at 15:25

0

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

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

answered Jul 09 '18 at 15:25

G Cadogan

183
1
9

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

3 Answers3