Great Coder

10 Feb 2022

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%;


Joseph Morgan

10 Feb 2022

Best Answer

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! 

© 2023 Copyrights reserved for