如何用HTML和CSS在达到高度限制时裁剪图片？

要实现宽屏设备限制图片高度并上下裁剪、窄屏自动缩放的效果，你可以通过容器限制高度+object-fit: cover属性来实现，这样既能保持图片比例，又不会出现空白。修改后的代码如下：

修改后的HTML（结构无需调整） #

<div class="image-container">
  <img src="../../assets/home_image1.jpg" alt="bg image of airplane" class="background-image" />
  <div class="text-overlay">
    <h1>Universal Tours</h1>
  </div>
</div>

修改后的CSS #

.image-container {
  position: relative;
  text-align: center;
  max-height: 600px; /* 设置高度上限 */
  overflow: hidden; /* 隐藏容器外的图片部分 */
  width: 100%;
}

.background-image {
  width: 100%;
  height: 100%; /* 让图片填满容器高度 */
  display: block;
  object-fit: cover; /* 保持比例填充容器，超出部分自动裁剪，默认居中裁剪 */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  color: #fff;
  border-radius: 5px;
}

原理说明 #

• image-container设置max-height:600px，宽屏时容器高度被限制在600px，overflow:hidden把超出的图片部分隐藏；窄屏时，图片按比例缩放后的高度会小于600px，容器会自适应图片高度，不会触发裁剪。
• object-fit: cover让图片以保持宽高比的方式填满容器，超出容器的部分自动裁剪，默认是居中裁剪，刚好能实现你要的上下裁剪效果，不会出现空白。
• 如果需要精准控制裁剪位置（比如始终从顶部裁剪），可以加上object-position: top，这样图片会对齐容器顶部，超出底部的部分被裁剪；同理object-position: bottom就是裁剪顶部。

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