Image max height without squishing it

@AIBug wrote:

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

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.

Posts: 1

Participants: 1

Read full topic