如何使圖像在 Django 的每個屏幕尺寸中響應 html 和 CSS？

Question

我在 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 */
}

你知道如何為其他屏幕尺寸保留和調整圖片嗎？ 如果它降低屏幕尺寸並自然響應圖片，請將其放在文本下方

Answer 1

使用flex-wrap自動將其向下移動：

.skills__container {
    flex-wrap: wrap;
}

如果要將圖像移動到文本上方，請使用flex-wrap: wrap-reverse; :

.skills__container {
    flex-wrap: wrap-reverse;
}

如果你想讓圖像盡可能大，縮小其他部分，使用flex:屬性：

.skills__img img {
    flex: 1;
}