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

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

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

Is OOCSS still a good CSS architecture in 2022?
Publish date: 2022-02-08 | Comments: 2

Tag: HTML & CSS

How to horizontally align to the centre a li inside an ul?
Publish date: 2022-03-04 | Comments: 2

Tag: HTML & CSS

Can't move the background-image code from CSS file to HTML file.
Publish date: 2022-02-13 | Comments: 2

Tag: HTML & CSS

How to align an Textarea in the middle of the webpage
Publish date: 2022-02-27 | Comments: 1

Tag: HTML & CSS

Searching for a better way to use abstracts in Dart SASS
Publish date: 2022-02-10 | Comments: 0

Tag: HTML & CSS

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

Tag: HTML & CSS