Icons Images Responsive

HTML & CSS
9

Here ya go gettin` silly again.

Just in case, though, I decided to see how tough they are. Ya got your images folder handy? Drop this file just above it and double click to open. No, it doesn’t use bootscrap nor any of your other CSS.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
#industries-icons {
    display:table;
    table-layout:fixed;
    width:100%;
}
.icon-rows {
    display:table-row;
}
figure {
    display:table-cell;
    vertical-align:top;
    outline:1px solid magenta;
}
figcaption {
    word-wrap:break-word;  /* temporary; for testing only */
}
img {
    display:block;
    background-color:#ddd;
    max-width:100%;
    height:auto;
}
    </style>
</head>
<body>

<div id="industries-icons">
    <div class="icon-rows">
        <figure>
            <img class="icons-iog" src="images/shippingicon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">SHIPPING</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/transformer_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">TRANSFORMER</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/aviation_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">AVIATION</figcaption>
        </figure>
        <figure>
            <img  class="icons-iog"src="images/electronics_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">ELECTRONICS</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/auto_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">AUTO</figcaption>
        </figure> 
    </div> 
    <div class="icon-rows">
        <figure>
            <img class="icons-iog" src="images/tech_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">TECHNOLOGY</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/instrumentation.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">INSTRUMENTATION</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/chem_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">CHEMICALS</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/furniture_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">FURNITURE</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/nuclear_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">NUCLEAR</figcaption>
        </figure> 
    </div>
    <div class="icon-rows">
        <figure>
            <img class="icons-iog" src="images/powerenergy_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">POWER & ENERGY</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/fooddrink_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">FOOD & DRINK</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/manu_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">MANUFACTURING</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/solar_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">SOLAR</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/science_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">SCIENCE</figcaption>
        </figure> 
    </div>
    <div class="icon-rows">
        <figure>
            <img class="icons-iog" src="images/glass_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">GLASS</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/medical_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">MEDICAL</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/defense_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">DEFENSE</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/dental_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">DENTAL</figcaption>
        </figure>
        <figure>
            <img class="icons-iog" src="images/glasses_icon.png" alt="" width="200" height="200"><br>
            <figcaption class="icon-cap">OPTICS</figcaption>
        </figure> 
    </div>
</div>

</body>
</html>

csosa-images.html (4.8 KB)

I just didn’t want you to blame the problems on those poor little images.