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.