Responsive Logo/Images

HTML & CSS
1

I’ve spent few hours this morning trying to make logo responsive. So it changes it size together with the page. Nothing seems to work. If I declare size in px, everything is fine, logo pic looks good, but it’s not responsive. I’ve tryed :cover | :contain and to declare size in %. But every time something goes wrong.

Logo not expanding to size needed, say if you want your logo half size of the page 50%, it wont expand, tryed to make my logo in PSD small/big, same not growing … :frowning:
or other thing if it does expand, half of the logo would be hidden, but that one I understand, it is because it maintains ratio of the image.

Cant get my head around and figure out, what would be best way to make logo look good and make it responsive.
What guys do you do with logos? do you set width in px? or in % ?

:confused::confused::confused::confused:

2

I tend to leave the logo alone and just let other content flow around it if necessary, but it’s up to you. You can give an image within the HTML a % width if you like.

We need to see an example of what you are trying to do, though. You can post working example on a site like CodePen.

3

I think that was the answer to my question. Use img in html. I was trying to use background, and hide html text, so it would be SEO friendly. But if I want my img to resize together with screen, i need to put it in HTML.

4

Theoretically speaking, would it be possible also to render the logo as an SVG image–so that it would scale indefinitely?

5

Yes.