Image max height without squishing it

I have an image at the top of my page. I have the width set to 100% because I want it to fill the width of the page. But, when the internet window is fully open, the photo takes up too much of the page. When I set a max-height (or just “height”) the photo squishes. Does anyone know how to make it so that the photo stop at a certain part of the page and then instead of squishing, it raises the top part of the photo off the screen or something?

here is my html

  <div class="heightLock">
    <img [src]="stuff?.profileBack" [alt]="stuff?.name">

and my scss

.heightLock {

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;


.heightLock img {

width: 100%;


if i add the height, it squishes the photo. I also tried donig a bottom margin and a bottom padding and it did not help.

I solved it!

If you use

top: calc(-5vw - 1vh - 1vmin);

as a class for your image, when the screen gets bigger, the picture raises higher. Adjust the values as needed.

Edit: I found a better way - Set the div to position relative and the image to position absolute and the use object-fit cover. Set image height to like 45%.