我尝试在CSS中调整图片，使其大小合适，适应每一个屏幕。你知道如何在CSS中实现吗？
我的HTML：

<!-- Skills Section-->
          <section class="page-section Skills" id="skills">
              <div class="container">
                        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Skills</h2>

                        <div class="skills__container bd-grid">
                            <div class="skills__box" >
                                {% for category in categories %}
                                <h3 class="skills__subtitle">{{category.name}}</h3>
                                    {% for skills in category.skills_set.all %}

                                        <span class="skills__name" >{{skills.skill_name}}</span>
                                    {% endfor %}
                                {% endfor %}

                            </div>

                            <div class="skills__img">
                                <img src="{% static '/images/img/HPD.png' %}" alt="">
                            </div>
                        </div>
              </div>
                    </section>

我的CSS：

/* ===== SKILLS =====*/
.skills__container{
    row-gap: 2rem;
    margin-top: 2.5rem;
    display: flex; /* use flexbox layout */
    align-items: center; /* center the items vertically */

}
.skills__subtitle{
    color: var(--first-color);
    margin-bottom: var(--mb-3);
    margin-top: 0px;
    text-decoration: none;
}

.skills__subtitle:hover {
    /* add underline on hover */
    /*text-decoration: 2px solid var(--first-color); */
    text-decoration: underline;
}

.skills__name{
    display: inline-block;
    font-size: var(--small-font-size);
    margin-right:  1.5rem !important ;/*var(--mb-2);*/
    margin-bottom: var(--mb-3);
    padding: .25rem .5rem;
    background-color: var(--white-color);
    border-radius: .25rem;
    color: black;
}
.skills__name:hover{
    background-color: var(--first-color);
    color: var(--white-color);

}
.skills__img img{
    width: auto; /* make the image responsive */
    border-radius: .5rem;
}

.skills__box{
    flex: 1; /* make it take up the remaining space */
}

.skills__img{
    flex: 0 0 25%; /* take up 25% of the container width */
    max-width: auto; /* set maximum width of the image */
    text-align: center; /* center the image */
}

你知道如何保持和适应其他屏幕尺寸的图片吗？2如果它降低了屏幕尺寸，使它在文字下面，并对图片自然React