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

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%;
}

- user4422282

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/

- Ben

---

修复了 - 非常感谢！您能告诉我使用“>”和不使用它的区别吗？ - user4422282

是直接子元素 'li > a > img' 会影响到 <li><a href=""><img> 但不包括 <li><a href=""><p><img>，而 li img 则会影响到两者。

- Ben

Answer 2

问题在于您的img规则中的max-width，max-width: 100%;正在覆盖您的td规则中的width: 20%;。宽度设置将被min-width和max-width覆盖。因此，只需为您的img标签设置适当的宽度，例如，您可以执行img { width: 20%; }，所有图像都将适合其位置。此外，为了保持图像的纵横比，只需设置宽度或高度即可。

- rby