Logo shrinks when resizing the browser

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 class="header">
 
 <a href="#" class="header__logo"><img src="images/eyada logo.png" alt="" class="header__logo-img"></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%;
 }
 }

Comments

Joseph Morgan

10 Feb 2022

Best Answer

You can prevent the logo shrink by using a specific height with no limited width like

.logo {
	height: 90px;
}

or you can use object-fit to handle it like

.logo {
	height: 90px;
	width: 100%;
	object-fit: contain; /* or cover */
}

Object-fit will prevent shrinking or image blurry in all images
and it's better to use SVG format for Logos

Great Coder

10 Feb 2022

WOW! This is the first time I know about object-fit. Thank you for your magnificent answer Jo!