How to have all icons at the same size via CSS for all ul > li > img?

Question

Given the following code, how can I make all image the same size (as the smallest one?)

Searched MDN and other ressources, but failed to do it.

On the file system, all icons are the same size:

$ file *
github.com.ico:        MS Windows icon resource - 2 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
joinmastodon.org.ico:  MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
stackoverflow.com.ico: MS Windows icon resource - 2 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
www.linkedin.com.ico:  MS Windows icon resource - 1 icon, 16x16, 32 bits/pixel
www.malt.com.ico:      MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 16x16, 32 bits/pixel
www.malt.fr.ico:       PNG image data, 16 x 16, 8-bit colormap, non-interlaced
www.upwork.com.ico:    MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 16x16, 32 bits/pixel

.ico {
    size: 15px;
}

    <ul class="ico">
        <li><img alt="github" src="https://sputnick.fr/icons/github.com.ico"><a href="https://github.com/" rel="nofollow noreferrer">Github</a></li>
        <li><img alt="Malt" src="https://sputnick.fr/icons/www.malt.fr.ico"><a href="https://www.malt.fr" rel="nofollow noreferrer">Malt</a></li>
        <li><img alt="Upwork" src="https://sputnick.fr/icons/www.upwork.com.ico"><a href="https://www.upwork.com/" rel="nofollow noreferrer">Upwork</a></li>
        <li><img alt="LinkedIn" src="https://sputnick.fr/icons/www.linkedin.com.ico"><a href="https://www.linkedin.com//" target="_blank">LinkedIn</a></li>
        <li><img alt="Stackoverflow" src="https://sputnick.fr/icons/stackoverflow.com.ico"><a href="https://stackexchange.com/users/212394/gilles-qu%c3%a9not?tab=accounts" target="_blank">Stackoverflow</a></li>
        <li><img alt="Mastodon" src="https://sputnick.fr/icons/joinmastodon.org.ico"><a href="https://mamot.fr/" rel="me nofollow noreferrer">Mastodon</a></li>
    </ul>

katakrowa · Accepted Answer · 2023-03-12T20:17:53.460

Add to yours code CSS / style:

.ico>li>img{
    width:22px;
    height:22px;
    margin-right:10px;
}

<ul class="ico">
    <li><img alt="github" src="https://sputnick.fr/icons/github.com.ico"><a href="https://github.com/" rel="nofollow noreferrer">Github</a></li>
    <li><img alt="Malt" src="https://sputnick.fr/icons/www.malt.fr.ico"><a href="https://www.malt.fr" rel="nofollow noreferrer">Malt</a></li>
    <li><img alt="Upwork" src="https://sputnick.fr/icons/www.upwork.com.ico"><a href="https://www.upwork.com/" rel="nofollow noreferrer">Upwork</a></li>
    <li><img alt="LinkedIn" src="https://sputnick.fr/icons/www.linkedin.com.ico"><a href="https://www.linkedin.com//" target="_blank">LinkedIn</a></li>
    <li><img alt="Stackoverflow" src="https://sputnick.fr/icons/stackoverflow.com.ico"><a href="https://stackexchange.com/users/212394/gilles-qu%c3%a9not?tab=accounts" target="_blank">Stackoverflow</a></li>
    <li><img alt="Mastodon" src="https://sputnick.fr/icons/joinmastodon.org.ico"><a href="https://mamot.fr/" rel="me nofollow noreferrer">Mastodon</a></li>
</ul>

score 0 · Answer 2 · answered Mar 12 '23 at 20:26

this will work. add that class to all the img you want it to get that size

.ico {
    width: 15px;
    height: 15px;
}

     <ul >
        <li><img class="ico" alt="github" src="https://sputnick.fr/icons/github.com.ico"><a href="https://github.com/" rel="nofollow noreferrer">Github</a></li>
        <li><img class="ico" alt="Malt" src="https://sputnick.fr/icons/www.malt.fr.ico"><a href="https://www.malt.fr" rel="nofollow noreferrer">Malt</a></li>
        <li><img class="ico" alt="Upwork" src="https://sputnick.fr/icons/www.upwork.com.ico"><a href="https://www.upwork.com/" rel="nofollow noreferrer">Upwork</a></li>
        <li><img class="ico" alt="LinkedIn" src="https://sputnick.fr/icons/www.linkedin.com.ico"><a href="https://www.linkedin.com//" target="_blank">LinkedIn</a></li>
        <li><img class="ico" alt="Stackoverflow" src="https://sputnick.fr/icons/stackoverflow.com.ico"><a href="https://stackexchange.com/users/212394/gilles-qu%c3%a9not?tab=accounts" target="_blank">Stackoverflow</a></li>
        <li><img class="ico" alt="Mastodon" src="https://sputnick.fr/icons/joinmastodon.org.ico"><a href="https://mamot.fr/" rel="me nofollow noreferrer">Mastodon</a></li>
    </ul>

How to have all icons at the same size via CSS for all ul > li > img?

2 Answers2