user image

Great Coder
Published in : 2022-02-10

Logo shrinks when resizing the browser

HTML & CSS

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: 

 

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

.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 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! 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to separate the background into three divs that can be flipped?
Publish date: 2022-02-12 | Comments: 1

Tag: HTML & CSS

Invalid CSS after : expected expression was - SASS error
Publish date: 2022-02-13 | Comments: 1

Tag: HTML & CSS

How can I add engraved style to my buttons using CSS?
Publish date: 2022-03-01 | Comments: 5

Tag: HTML & CSS

What is the need for using (for) attr in the label of an input tag?
Publish date: 2022-02-11 | Comments: 2

Tag: HTML & CSS

How do custamize my button to give it a bubble look using CSS?
Publish date: 2022-03-04 | Comments: 0

Tag: HTML & CSS

Do I have to upload the sass files or just the CSS file?
Publish date: 2022-02-11 | Comments: 1

Tag: HTML & CSS

Sticky header goes behind the Images
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

Multiple classes in :not() function in CSS
Publish date: 2022-07-25 | Comments: 2

Tag: HTML & CSS