Question 44137 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search