HTML中的图像和文本一个标记，图像在其中调整大小以适应容器

我有一个482x482图像，我想与

容器一起使用，该容器定义如下：

    <nav id="nav">
        <ul class="links">
            <li><a href="/exchange/accueil">
                <img src="{% static 'exchange/images/HomeIconWhite.png' %}"></img>
            </a><p>Accueil</p></li>
            <li><a href="/exchange/recherche_avance">Recherche avancée</a></li>
            <li><a href="/exchange/rajouter">Ajouter une info</a></li>
            {% if user.is_authenticated %}
            <li><a href="/exchange/deconnexion">Déconnexion</a></li>
            {% else %}
            <li><a href="/exchange/connexion">Connexion</a></li>
            {% endif %}
        </ul>
    </nav>

我曾尝试将css中的一些规则定义为

#nav ul.links img

，但这并没有达到我的目标

我想要的是图像正确地匹配导航容器，在其中居中，并在旁边有一些文本（也居中）

我很确定这样做的方式是显而易见的，但我在网上没有找到任何适合我的问题的答案，它们都有不同之处，使它们不适用于我的问题

如果你需要更多的细节，请告诉我。图像链接100%正常工作，因此问题并非来自此

编辑

这里是链接

---

是的，这很有帮助，但这并不能解决我的图像缩放问题。图像仍然太大，我仍然需要图像文本。谢谢你，这是一个快速修复我需要。你想在原始大小的图像（即482*482）？还是要缩小？缩小以适应导航集装箱请检查我编辑的答案。在样式表中添加css。如果它解决了你的问题，请考虑投票。我觉得这可以解决我的问题，但是我有问题把它集成到我的代码中。我将在文章的底部添加Github链接。请随意编辑这个答案，并使用在您这边起作用的代码片段。是的，这很有帮助，但这并不能解决我的图像缩放问题。图像仍然太大，我仍然需要图像文本。谢谢你，这是一个快速修复我需要。你想在原始大小的图像（即482*482）？还是要缩小？缩小以适应导航集装箱请检查我编辑的答案。在样式表中添加css。如果它解决了你的问题，请考虑投票。我觉得这可以解决我的问题，但是我有问题把它集成到我的代码中。我将在文章的底部添加Github链接。您可以随意编辑这个答案，并使用在您这边起作用的代码片段。

    #nav {
        color: #ffffff;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-transition: -moz-transform 1s ease, opacity 1s ease;
        -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
        -ms-transition: -ms-transform 1s ease, opacity 1s ease;
        transition: transform 1s ease, opacity 1s ease;
        background: rgba(255, 255, 255, 0.175);
        height: 4rem;
        line-height: 4rem;
        margin: -4rem auto 0 auto;
        overflow: hidden;
        padding: 0 2rem 0 0;
        position: relative;
        width: calc(100% - 4rem);
        max-width: 72rem;
        z-index: 2;
    }

        #nav ul.divided li {
            border-top-color: #ffffff;
        }

        #nav ul.icons li a.icon:hover:before {
            color: #18bfef;
        }

        #nav ul.icons.alt li .icon:before {
            box-shadow: inset 0 0 0 2px #ffffff;
        }

        #nav ul.icons.alt li a.icon:hover:before {
            box-shadow: inset 0 0 0 2px #18bfef;
        }

        #nav input, #nav select, #nav textarea {
            color: #ffffff;
        }

        #nav a {
            color: #ffffff;
            border-bottom-color: rgba(255, 255, 255, 0.5);
        }

            #nav a:hover {
                border-bottom-color: transparent;
                color: #18bfef !important;
            }

        #nav strong, #nav b {
            color: #ffffff;
        }

        #nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
            color: #ffffff;
        }

        #nav blockquote {
            border-left-color: #ffffff;
        }

        #nav code {
            background: rgba(255, 255, 255, 0.075);
            border-color: #ffffff;
        }

        #nav hr {
            border-bottom-color: #ffffff;
        }

        #nav ul.links {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-grow: 1;
            -webkit-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -moz-flex-shrink: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-shrink: 1;
            flex-shrink: 1;
            font-family: "Source Sans Pro", Helvetica, sans-serif;
            font-weight: 900;
            letter-spacing: 0.075em;
            list-style: none;
            margin-bottom: 0;
            padding-left: 0;
            text-transform: uppercase;
        }

            #nav ul.links li {
                display: block;
                padding-left: 0;
            }

                #nav ul.links li a {
                    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    display: block;
                    font-size: 0.8rem;
                    outline: none;
                    padding: 0 2rem;
                }

                    #nav ul.links li a:hover {
                        color: inherit !important;
                        background-color: rgba(255, 255, 255, 0.1);
                    }

                #nav ul.links li.active {
                    background-color: #ffffff;
                }

                    #nav ul.links li.active a {
                        color: #1e252d;
                    }

                        #nav ul.links li.active a:hover {
                            color: #18bfef !important;
                        }

        #nav ul.icons {
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            -ms-flex-grow: 0;
            flex-grow: 0;
            -moz-flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-shrink: 0;
            flex-shrink: 0;
            margin-bottom: 0;
        }

        @media screen and (max-width: 980px) {

            #nav {
                display: none;
            }

        }

#nav ul.links li:first-of-type a{
    display: flex
}
#nav ul.links li:first-of-type a p{
    margin-top: 0;
    margin-left: 5%
}
#logo{
    height: 4em;
    margin-top: 7px;            
}