Great Coder
10 Feb 2022
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:
<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
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 web-brackets.com