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

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

问题是你的img规则为max-width， max-width: 100%; 覆盖你的width: 20%; td规则。 宽度设置将被最小宽度和最大宽度覆盖。 所以只需为你的img标签设置一个合适的宽度，即你可以做img { width: 20%; } img { width: 20%; }例如，和所有的图像将适合到位。 此外，要保持图像的纵横比，只需设置宽度或高度。

Answer 2

更改

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

至

.artists table img{
    width: 100%;
}

这应该工作。

这是一个JSFiddle供您玩https://jsfiddle.net/4paqqmg2/