[GH-ISSUE #423] Empty spaces when using flag as background-image with specific width and height #261

New issue

Closed

opened 2026-03-03 14:35:53 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:35:53 +03:00

Owner

Originally created by @Humeira on GitHub (Jan 24, 2018).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/423

Hello,

I wanted to add a shadow on the flag, but unfortunately it's not pleasant on the eye because of the spaces as shown in the screenshot below.

I just drop in the classes flag-icon flag-icon-us flag-custom on the div with the following CSS only specifying the width and the height

.flag-custom { width: 85px; height: 85px }

Is there anyway to remove these spaces?

Originally created by @Humeira on GitHub (Jan 24, 2018). Original GitHub issue: https://github.com/lipis/flag-icons/issues/423 Hello, I wanted to add a shadow on the flag, but unfortunately it's not pleasant on the eye because of the spaces as shown in the screenshot below. I just drop in the classes `flag-icon flag-icon-us flag-custom` on the div with the following CSS only specifying the width and the height `.flag-custom { width: 85px; height: 85px }` Is there anyway to remove these spaces? ![image](https://user-images.githubusercontent.com/3885848/35317017-1cdb5336-00ee-11e8-9cad-57afeaa4556f.png)

kerem closed this issue

2026-03-03 14:35:53 +03:00

kerem commented

2026-03-03 14:35:54 +03:00

Author

Owner

@lipis commented on GitHub (Jan 24, 2018):

are you using the squared version?

@lipis commented on GitHub (Jan 24, 2018): are you using the squared version?

kerem commented

2026-03-03 14:35:54 +03:00

Author

Owner

@Humeira commented on GitHub (Jan 24, 2018):

@lipis nope only flag-icon flag-icon-us and my custom width & height

@Humeira commented on GitHub (Jan 24, 2018): @lipis nope only `flag-icon flag-icon-us` and my custom width & height

kerem commented

2026-03-03 14:35:54 +03:00

Author

Owner

@Findus23 commented on GitHub (Jan 24, 2018):

But when you are using non-square flags and forcing them to be square via CSS there is no other way than adding spacing at the top.
To have a aspect ratio of 4:3 you'll need to use a height of 63.75px.

@Findus23 commented on GitHub (Jan 24, 2018): But when you are using non-square flags and forcing them to be square via CSS there is no other way than adding spacing at the top. To have a aspect ratio of 4:3 you'll need to use a height of `63.75px`.

kerem commented

2026-03-03 14:35:54 +03:00

Author

Owner

@lipis commented on GitHub (Jan 24, 2018):

and instead of flag-icon you can use the flag-icon-background and flag-icon-squared but maybe some overrides need to be done.. haven't played with squared background ones :)

@lipis commented on GitHub (Jan 24, 2018): and instead of `flag-icon` you can use the `flag-icon-background` and `flag-icon-squared` but maybe some overrides need to be done.. haven't played with squared background ones :)

kerem commented

2026-03-03 14:35:54 +03:00

Author

Owner

@Humeira commented on GitHub (Jan 26, 2018):

@lipis thanks i'll try that.

@Humeira commented on GitHub (Jan 26, 2018): @lipis thanks i'll try that.