Html 为什么我通过以下代码获得的左下角的图像比其他图像高？_Html_Css

Html 为什么我通过以下代码获得的左下角的图像比其他图像高？

html css

Html 为什么我通过以下代码获得的左下角的图像比其他图像高？,html,css,Html,Css,我一直在尝试用HTML和CSS创建一个图像网格，下面是我使用的代码。正如我所见，你可以在我所附的图片中看到。左下角的图片比其他图片的高度更高。有人能告诉我为什么会发生这种情况，我如何才能使图像与其他图像相同？多谢各位代码-HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.c

我一直在尝试用HTML和CSS创建一个图像网格，下面是我使用的代码。正如我所见，你可以在我所附的图片中看到。左下角的图片比其他图片的高度更高。有人能告诉我为什么会发生这种情况，我如何才能使图像与其他图像相同？多谢各位

代码-HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Float Test</title>
</head>
<body>

    <h1>Float Test</h1>

    <ul class="float-test">
        <li>
            <figure>
                <img src="https://images.unsplash.com/photo-1521651201144-634f700b36ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
            </figure>
        </li><li>
            <figure>
                <img src="https://images.unsplash.com/photo-1500479694472-551d1fb6258d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
            </figure>
        </li><li>
            <figure>
                <img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
            </figure>
        </li><li>
            <figure>
                <img src="https://images.unsplash.com/photo-1489084917528-a57e68a79a1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
            </figure>
        </li>
    </ul>

    <ul class="float-test">
        <li>
            <figure>
                <img src="https://images.unsplash.com/photo-1484557985045-edf25e08da73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
            </figure>
        </li>
    <li>
            <figure>
                <img src="https://images.unsplash.com/photo-1504618223053-559bdef9dd5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
            </figure>
        </li>
    <li>
            <figure>
                <img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
            </figure>
        </li>
    <li>
            <figure>
                <img src="https://images.unsplash.com/photo-1453227588063-bb302b62f50b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
            </figure>
        </li>
    </ul>

</body>
</html>

这是因为图像的大小与其他图像不同（稍大）。您可以通过限制特定图像的高度或使用photoshop之类的程序更改图像的大小来解决此问题。

检查链接，您将看到1576，其他所有图像的高度都是750或1500。我问这个问题，因为我是初学者。但我选择的其他图像大小不同。为什么这种行为不适用于其他图像？提前谢谢。我想这是因为除了那张图像外，其他图像的纵横比都一样（看起来比其他图像高）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.float-test {
    list-style: none;
    width: 100%;
}

.float-test li {
    display: block;
    width: 25%;
    float: left;
}

.flaot-test li figure {
    width: 100%;
}

.float-test li figure img {
    width: 100%;
}