表格单元格中的锚定图像未调整为单元格宽度

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/一起玩

Answer 2

问题是你的max-width，max-width: 100%;的img规则正在覆盖width: 20%;的td规则。宽度设置将被最小宽度和最大宽度覆盖。因此，只需为img标签设置合适的宽度，例如，您可以执行img { width: 20%; }，并且所有图像都适合放置。此外，要保持图像的纵横比，只需设置宽度或高度。