表格单元格中的锚定图像未按单元格宽度调整大小

Question

对 HTML5 和 CSS 相当陌生。我正在尝试调整表格单元格中图像的大小，但它的大小不适合单元格的大小 - 任何帮助将不胜感激！

链接：http://mercury.ict.swin.edu.au/cos10020/s100505453/techno_syndicate/index.htm

HTML

        <div class="artists">
        <table>
            <caption>
                <h1>Artists</h1>
            </caption>
            <tr>
                <td><a href=""><img src="img/artists/adrian_hour.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/anna.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/carl_craig.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/danny_daze.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/dubfire.jpg" alt=""></a></td>
            </tr>
            <tr>
                <td><a href=""><img src="img/artists/kink.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/matrixxman.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/mr_g.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/nicole_moudaber.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/nikola_gala.jpg" alt=""></a></td>
            </tr>
            <tr>
                <td><a href=""><img src="img/artists/oliver_huntemann.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/radio_slave.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/scuba.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/spencer_parker.jpg" alt=""></a></td>
                <td><a href=""><img src="img/artists/uto_karem.jpg" alt=""></a></td>
            </tr>
        </table>
    </div>

CSS

#homepage .artists {
    width: 70vw;
    height: 100vh;
    background: linear-gradient(#E7E8D6, #B9C2D7);
    margin: auto;
    border: 0px;
    padding: 0px;
}

#homepage .artists > table {
    table-layout: fixed;
    border-spacing: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0px;
    margin: 0px;
}

#homepage .artists > table > caption > h1 {
    font-family: "SF Funk Master";
    font-size: 64px;
    text-align: left;
    color: #003663;
    padding: 40px;
    margin: 0px;
}

#homepage .artists > table > tr {
    width: 100%;
    height: 33.33%;
}

#homepage .artists > table > tr > td {
    width: 20%;
    height: 100%;
}

#homepage .artists > table > tr > td > a > img{
    max-width: 100%;
    max-height: 100%;
}

Answer 1

改变

#homepage .artists > table > tr > td > a > img{
    max-width: 100%;
    max-height: 100%;
}

到

.artists table img{
    width: 100%;
}

应该可以的。

这里有一个 JSFiddle 供你玩 https://jsfiddle.net/4paqqmg2/