如何实现电影海报统一375px高度？解决图片留白问题

问题描述 #

开发电影列表项目时，希望所有电影海报保持375px的统一高度，但设置.movie-image类的高度后，不符合高度的图片下方出现留白，调整height和object-fit属性后仍未解决。

原因分析 #

你把object-fit和height属性应用在了包裹图片的父容器.movie-image上，而非直接作用于<img>标签本身，导致属性未生效，图片无法按预期填充容器。

解决方案 #

修改CSS，将高度、object-fit等属性直接应用到<img>标签，并给父容器设置溢出隐藏，确保图片不会超出容器范围：

修改后的CSS代码 #

.movie-image {
  height: 375px;
  overflow: hidden; /* 超出容器的部分隐藏 */
  width: 250px; /* 统一容器宽度，保证布局一致 */
}

.movie-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例裁剪图片，填满容器 */
  /* 若不想裁剪，可改用object-fit: contain，但需协调容器背景色避免留白 */
}

.item-desc {
  background-image: Url("https://64.media.tumblr.com/a273ca5e593b171e3fb237974bf40c8c/7dfc5099f5485297-4e/s2048x3072/3f00eac237cd5d0db7ee1cb72fdf06b175db9679.jpg");
  height: 85px;
  width: 250px;
}
.subtitle {
    background-image: Url('https://64.media.tumblr.com/d3b90aee405195699e293f320c7da8df/9e2fb2468a7c651d-9f/s250x400/1952c00e74253264eb65fafbfc0a634a68b86704.png');
    padding:5px; 
    border:2px outset white;
    color:#fff;
    text-shadow: -1px 0  #000, 0 1px  #000, 1px 0  #000, 0 -1px  #000;
    transition:0.3s;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
}

.info  {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  font-style: normal;
  margin-right: 20px;
}

.footer {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #fff; 
}

关键说明 #

• .movie-image作为容器，设置固定高度375px和统一宽度，overflow: hidden确保图片超出部分被隐藏，避免破坏布局。
• 内部<img>设置width:100%和height:100%，强制占满容器空间。
• object-fit: cover是海报展示的最优选择，既能保持图片比例，又能填满容器，不会出现留白；若偏好完整展示图片，可替换为object-fit: contain，但需给.movie-image设置与页面协调的背景色，避免留白突兀。

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