CODEWITHSUNDEEP
htmlcssimage
Chris
Chris

Reputation: 282

Five images to take up full width collectively

I'm working on a site where the footer includes 5 social media thumbnail images, which are also links:

enter image description here

I want these images to display with a max-width of 64px (their native size), and when the width of the page shrinks to much to accommodate this, then shrink just to 20% so that all 5 images fit next to each other.

HTML: 

<div id="footer-imgs">
    <a href='https://www.facebook.com/chrisscribnermusic' class='footer-img'><img src='imgs/social-facebook.png'></a>
    <a href='https://twitter.com/ChrisScribs' class='footer-img'><img src='imgs/social-twitter.png'></a>
    <a href='https://soundcloud.com/chris-scribner-1' class='footer-img'><img src='imgs/social-soundcloud.png'></a>
    <a href='https://www.youtube.com/user/ChrisScribs/feed' class='footer-img'><img src='imgs/social-youtube.png' /></a>
    <a href='https://instagram.com/chrisscribs/' class='footer-img'><img src='imgs/social-instagram.png'></a>
</div>

Right now the CSS is: 

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
}
#footer-imgs a {
    padding: 0px;
    margin: 0px;
}
#footer-imgs a img {
    max-width: 64px;
    padding: 0px;
    margin: 0px;
}

The images simply don't want to shrink more than 64px. If the window shrinks this much, the div just expands past the width of the page (creates horizontal scrollbar). Using width: 20% didn't solve this for me either. How can I get these to shrink the way they need to?

Edit: Would just like to say thanks to everyone who tried, on what was a surprisingly difficult issue!

Upvotes: 2

Views: 84

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371699

You may want to consider using a flexbox.

It's efficient (minimal code), responsive, and makes centering – both vertical and horizontal – easy.

CSS

#footer-imgs {
    display: flex; /* establish flex container */
    align-items: center; /* center flex items vertically */
    justify-content: space-around; /* spread flex items across container */
}

#footer-imgs a img {
    max-width: 100%; /* scale images to screen size */
    height: auto;  /* scale images to screen size */    
}

DEMO: http://jsfiddle.net/2notcw09/4/ (resize window for effect)

Note that flexbox is supported by all major browsers, except IE 8 & 9.

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try setting #footer-imgs width to 100% , #footer-imgs a img width to calc(20%)

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    width: 100%;
}
#footer-imgs a {
    padding: 0px;
    margin: 0px;
}
#footer-imgs a img {
    max-width: 64px;
    padding: 0px;
    margin: 0px;
    width: calc(20%);
}

jsfiddle http://jsfiddle.net/ak53nwt4/

Upvotes: 0

Ziggy Verstrepen
Ziggy Verstrepen

Reputation: 103

Like Rob said, you can use a width of 20% on the img, but 20% of what? You should give your parent element a width of 100% so it knows what to fill.

HTML

<div id="footer-imgs">
    <a href='https://www.facebook.com/chrisscribnermusic' class='footer-img'><img src='imgs/social-facebook.png'></a>
    <a href='https://twitter.com/ChrisScribs' class='footer-img'><img src='imgs/social-twitter.png'></a>
    <a href='https://soundcloud.com/chris-scribner-1' class='footer-img'><img src='imgs/social-soundcloud.png'></a>
    <a href='https://www.youtube.com/user/ChrisScribs/feed' class='footer-img'><img src='imgs/social-youtube.png' /></a>
    <a href='https://instagram.com/chrisscribs/' class='footer-img'><img src='imgs/social-instagram.png'></a>
</div>

CSS

#footer-imgs {
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    width: 100%;
    text-align:center;
}

#footer-imgs a {
    padding: 0px;
    margin: 0px;
}

#footer-imgs a img {
    width: 20%;
    max-width: 64px;
    padding: 0px;
    margin: 0px;
}

Upvotes: 0

Related Questions