如何用CSS实现图片始终填满容器并按需裁剪？技术问询

直接用CSS的object-fit: cover就能简洁解决这个问题，它会自动让图片保持比例并填满容器，根据容器和图片的比例差异，自动裁剪左右或上下的多余部分。

修改后的CSS代码 #

/* 给figure容器明确设置宽高（原代码缺失这部分，需补上） */
body > main > section > figure {
  width: calc(100vw * 2/3);
  height: 95vh;
  background-color: rgb(10, 12, 54);
  border-style: none solid none none;
  overflow: hidden;
}

/* 调整图片样式，核心用object-fit: cover */
body > main > section > figure > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理说明 #

• object-fit: cover会让图片按自身21:9的比例缩放，直到完全覆盖整个容器区域，超出容器的部分会被自动裁剪：
  • 当容器比例（比如常规16:9屏幕）比图片21:9窄时，图片宽度撑满容器，上下完整显示，左右超出部分被裁剪；
  • 当容器比例（比如32:9超宽屏）比图片21:9宽时，图片高度撑满容器，左右完整显示，上下超出部分被裁剪；
• 不需要额外的margin和transform来居中，object-fit: cover默认会对图片进行居中裁剪，若需调整裁剪位置，可额外添加object-position属性（例如object-position: left center）。

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