CODEWITHSUNDEEP
githubgithub-pagesgithub-flavored-markdown
Suhas Rao
Suhas Rao

Reputation: 83

Displaying rounded images in github pages for profile image (using markdown)

I'm trying to display circular/rounded images using markdown in my github page. Right now i'm able to display image as shown here, check this please But i need the image to be like this,here

Check out my github page, here still working on it

I did search on the internet and found several articles all of them used HTML and CSS to display round images On w3schools. But I want to display the image using markdown. Is there away to display Circular images using markdown. I'm a noobie here, please help me.

Upvotes: 7

Views: 5058

Answers (3)

neonwatty
neonwatty

Reputation: 346

You can display the image in markdown using html / css.

How about something like this?

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVoFq3XlAYVa5ThUCMFuzv_C7zei7KhT9Nag&s" alt="Avatar" style="width:100px; height:100px; border-radius:50%;">

Upvotes: -1

Andrew
Andrew

Reputation: 1318

Another way is to download an image editing software like GIMP and mask out a circle. Then remember to export as a PNG with transparency, but the images.weserv.nl service is a great way to do it assuming the service never goes down

Upvotes: 4

astrochun
astrochun

Reputation: 1796

Not sure if this will work for you, but what I have done is use images.weserv.nl service: https://images.weserv.nl/?url=avatars.githubusercontent.com/u/65769327?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d

You can adjust the height and width. It will generate something like this: avatar

Markdown:

![avatar](https://images.weserv.nl/?url=avatars.githubusercontent.com/u/65769327?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d
)

Upvotes: 12

Related Questions