响应式图片无法自适应：实现最后4张图片垂直居中且保持尺寸

嘿，我瞅了你的代码，要让最后那4张演员图片在移动端垂直居中排列还保持原尺寸，核心问题出在媒体查询里对#acteur和列表项的样式设置上。咱们一步步改，保证解决问题：

关键问题分析 #

你当前的移动端样式里，#acteur的宽度被固定成250px，还保留了浮动，而且图片被缩小到230px，这就导致没法垂直排列也没法保持原尺寸。咱们得把这些不合理的设置改掉。

修改后的完整代码 #

我把HTML和CSS分开整理了，看起来更清晰：

HTML部分 #

<div id="banniere"> 
  <img src="images/banniere.jpg" alt="FAST & FURIOUS 9"> 
</div> 
<div id="content"> 
  <img src="images/Fond.jpg" alt="FAST & FURIOUS 9"> 
</div> 
<div id="trailer"> 
  <div> 
    <iframe max-width="640" src="https://www.youtube.com/embed/K_8jNjPOUqQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 
  </div> 
</div> 
<div id="news"> 
  <img src="images/photo-news.jpg" alt="FAST & FURIOUS 9"> 
</div> 
<div id="texte"> 
  <h3>FAST & FURIOUS 9 a été retardé d'un an</h3> 
  <p> Universal Pictures a fait savoir que la sortie du neuvième volet de<br> la franchise“Fast and Furious” a été repoussée d’un an. </p> 
  <p> Si la projection du film devait être lancée le 19 avril 2019, sa sortie<br> au cinéma a été reportée au 10 avril 2020 – pendant le week-end<br> pascal. Aucun réalisateur n’est associé au film pour le moment. La <br> plupart des acteurs de la franchise rempile pour « Fast 9 »,dont<br> Vin Diesel. </p> 
  <p> Après la sortie de “Fast & Furious 8” en début d’année, Universal <br> a commencé à concocter une histoire pour un spin-off avec<br>Dwayne Johnson et Jason Statham pour commencer. </p> 
</div> 
<ul id="acteur"> 
  <li> 
    <img src="images/Dwayne-Johnson.jpg" alt="FAST & FURIOUS 9"> 
    <p> Dwayne Johnson </p> 
  </li> 
  <li> 
    <img src="images/jordana_brewster.jpg" alt="FAST & FURIOUS 9"> 
    <p> Jordana Brewster </p> 
  </li> 
  <li> 
    <img src="images/Michelle-Rodriguez.jpg" alt="FAST & FURIOUS 9"> 
    <p> Michelle Rodriguez </p> 
  </li> 
  <li id="vin"> 
    <img src="images/vin-diesel.jpg" alt="FAST & FURIOUS 9"> 
    <p> Vin Diesel </p> 
  </li> 
</ul>

CSS部分 #

#content { 
  min-width: 100%; 
  min-height: 100%; 
  position: absolute; 
  width:auto; 
  height:auto; 
} 

#trailer { 
  max-width: 1000px; 
  margin: auto; 
} 

#trailer div { 
  top: 60px; 
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
  overflow: hidden; 
} 

#trailer iframe, #trailer object, #trailer embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 

#news { 
  width:250px; 
  height:250px; 
  float: left; 
  margin-top: 95px; 
  position: relative; 
  padding-left: 180px; 
  display: block; 
} 

#texte { 
  font-family:"Antique-Olive"; 
  font-size: 18px; 
  margin-left:546px; 
  margin-top: 75px; 
  float: right; 
  position: absolute; 
  color: white; 
} 

#texte h3 { 
  margin-left:10px; 
} 

#acteur { 
  font-family:"Antique-Olive"; 
  font-size:20px; 
  margin-left: 40px; 
  padding-left: 80px; 
  margin-top: 425px;
} 

#acteur li { 
  width:200px; 
  height:200px; 
  float: left; 
  list-style: none; 
  display: block; 
  padding-left: 65px; 
  position: relative; 
} 

#acteur img { 
  display: block; 
  position:relative; 
  z-index:1; 
  height:200px; 
  width:200px; 
} 

#acteur li p { 
  color: white; 
  margin-top:20px; 
  margin-left: 22px; 
} 

#acteur li#vin p { 
  margin-left: 60px; 
} 

/* 移动端（≤480px）样式调整 */
@media screen and (max-width: 480px){ 
  #texte { 
    float: none; 
    margin:50px auto; 
    position: static; /* 移除绝对定位，避免布局错乱 */
    width: 90%; /* 适配屏幕宽度 */
  } 
  #banniere img {
    height: 100px; 
    width: 100%;
    object-fit: cover; /* 保持图片比例不变形 */
  } 
  #texte h3, #texte p { 
    font-size: 18px; 
    margin: 10px 15px; /* 用margin控制间距，更灵活 */
  } 
  #news { 
    float: none; 
    margin: 20px auto; 
    padding-left: 0; /* 去掉多余内边距 */
  } 
  /* 演员列表核心调整 */
  #acteur { 
    margin: 40px auto; 
    padding-left: 0; /* 移除默认内边距 */
    width: fit-content; /* 容器宽度适配内容 */
  } 
  #acteur li { 
    float: none; /* 取消浮动，实现垂直排列 */
    padding-left: 0; 
    margin: 20px auto; /* 每个列表项居中，增加垂直间距 */
    text-align: center; /* 文字和图片居中对齐 */
  } 
  #acteur img { 
    width: 200px; /* 保持原尺寸 */
    height: 200px; 
    margin: 0 auto; /* 图片居中 */
  } 
  #acteur li p { 
    font-size: 18px; 
    margin-top: 10px; 
    margin-left: 0; /* 文字居中 */
  } 
  #acteur li#vin p { 
    margin-left: 0; /* Vin的文字也居中 */
  } 
} 

/* 平板端（≤720px）样式调整 */
@media screen and (max-width: 720px) { 
  /* 和移动端样式基本一致，也可以根据需求微调 */
  #texte { 
    float: none; 
    margin:50px auto; 
    position: static;
    width: 90%;
  } 
  #banniere img {
    height: 100px;
    width: 100%;
    object-fit: cover;
  } 
  #texte h3, #texte p { 
    font-size: 18px; 
    margin: 10px 15px;
  } 
  #news { 
    float: none; 
    margin: 20px auto; 
    padding-left: 0;
  } 
  #acteur { 
    margin: 40px auto; 
    padding-left: 0;
    width: fit-content;
  } 
  #acteur li { 
    float: none; 
    padding-left: 0; 
    margin: 20px auto; 
    text-align: center;
  } 
  #acteur img { 
    width: 200px; 
    height: 200px; 
    margin: 0 auto;
  } 
  #acteur li p { 
    font-size: 18px; 
    margin-top: 10px; 
    margin-left: 0;
  } 
  #acteur li#vin p { 
    margin-left: 0;
  } 
}

为啥这么改？ #

1. 演员列表容器：用width: fit-content让容器只包裹内容，再margin: auto实现整体居中，不会被固定宽度限制。
2. 列表项：取消浮动后自然垂直排列，text-align: center让图片和文字都居中，margin: 20px auto给每个演员项留够垂直空间。
3. 图片尺寸：明确设置宽高为200px，保证在移动端也保持原大小，不会被缩小。
4. 其他细节优化：比如#texte改成静态定位，避免和其他元素重叠；#banniere用object-fit保证图片比例，不会拉伸变形。

这样改完之后，在小屏幕下那4张演员图就会乖乖垂直居中排列，还能保持原来的尺寸啦～

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