如何在Django中用HTML和CSS实现图片全屏幕响应式适配？

我来帮你解决这个问题！要实现图片适配所有屏幕，并且在小屏幕下自动移到文字下方，只需要调整CSS里的flex布局和图片的响应式属性就可以了，具体改动如下：

1. 先让图片本身实现响应式 #

首先修改图片的样式，确保它能自适应容器宽度，同时保持原有比例：

.skills__img img{
    width: 100%; /* 图片宽度占满容器 */
    height: auto; /* 高度自动调整，保持比例 */
    border-radius: .5rem;
}

把原来的width: auto改成width:100%，这样图片会根据父容器的宽度自动缩放，不会超出容器范围。

2. 添加媒体查询，适配小屏幕布局 #

我们需要给.skills__container添加媒体查询，当屏幕宽度小于某个断点（比如768px，这个数值你可以根据自己的需求调整）时，把flex布局的方向从水平改成垂直，这样图片就会自动跑到文字下方：

/* 媒体查询：适配小屏幕设备 */
@media screen and (max-width: 768px) {
    .skills__container{
        flex-direction: column; /* 布局方向改为垂直排列 */
    }
    .skills__img{
        flex: 1; /* 小屏幕下图片容器占满可用宽度 */
        max-width: 100%; /* 最大宽度设为100% */
        margin-top: 2rem; /* 给图片上方加一点间距，和文字区分开 */
    }
}

同时，我们可以给.skills__img原来的样式补全max-width，确保在大屏下的宽度控制准确：

.skills__img{
    flex: 0 0 25%; /* 大屏下占25%宽度 */
    max-width: 25%; /* 明确最大宽度，和flex basis保持一致 */
    text-align: center; 
}

修改后的完整CSS代码 #

/* ===== SKILLS =====*/
.skills__container{
    row-gap: 2rem;
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
}
.skills__subtitle{
    color: var(--first-color);
    margin-bottom: var(--mb-3);
    margin-top: 0px;
    text-decoration: none;
}

.skills__subtitle:hover {
    text-decoration: underline;
}

.skills__name{
    display: inline-block;
    font-size: var(--small-font-size);
    margin-right:  1.5rem !important ;
    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: 100%; /* 修改为100%，实现响应式 */
    height: auto; /* 自动保持比例 */
    border-radius: .5rem;
}

.skills__box{
    flex: 1;
}

.skills__img{
    flex: 0 0 25%;
    max-width: 25%; /* 补全max-width */
    text-align: center;
}

/* 添加媒体查询 */
@media screen and (max-width: 768px) {
    .skills__container{
        flex-direction: column;
    }
    .skills__img{
        flex: 1;
        max-width: 100%;
        margin-top: 2rem;
    }
}

效果说明 #

• 在大屏设备上，图片依然保持25%的宽度，和文字水平排列，图片会自适应容器宽度缩放；
• 当屏幕宽度小于768px时，布局自动切换为垂直排列，图片移到文字下方，并且占满整个容器宽度，完美适配手机屏幕。

内容的提问来源于stack exchange，提问作者Henry