Great Coder
Published in : 2022-02-10
The logo of a website that I am working on is great until I start to decrease the height of the browser. It starts to shrink.
Here is the HTML code:
<header > <a href="#" ><img src="images/eyada logo.png" alt="" ></a>
And here is the SASS code:
.header { height: 15vh; width: 100%; background-color: transparent; color: $white; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; position: absolute; top: 0; right: 0; &__logo { height: 80%; padding: 1rem 0; &-img { height: 100%; } }
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Joseph Morgan Date : 2022-02-10
Best answers
11
Best answers
11
You can prevent the logo shrink by using a specific height with no limited width like
or you can use object-fit to handle it like
Object-fit will prevent shrinking or image blurry in all images
and it's better to use SVG format for Logos
Great Coder Date : 2022-02-10
Best answers
1
Best answers
1
WOW! This is the first time I know about object-fit. Thank you for your magnificent answer Jo!