CSS设置min-width后图片仅右侧裁剪，如何实现居中裁剪及横幅自适应？

解决方案 #

方案1：保留现有标签实现（推荐，无需修改HTML结构） #

你可以直接通过CSS新增object-fit和object-position属性控制图片的裁剪位置，这两个属性专门用于控制等替换元素的缩放对齐逻辑，修改后的CSS代码如下：

.banner-container {
  overflow: hidden;
  min-height: 275px;
  /* 新增：为叠加的文字提供定位上下文 */
  position: relative;
}
.background-image {
  min-width: 755px;
  height: 100%;
  width: 100%;
  /* 新增：保持图片比例填满容器，超出部分裁剪 */
  object-fit: cover;
  /* 新增：自定义裁剪位置，优先保留右侧内容、裁剪左侧；需要居中保留就改为center center */
  object-position: right center;
}
/* 叠加文字的定位样式，可根据需求调整对齐规则 */
.banner-text {
  position: absolute;
  z-index: 1;
  /* 以下为居中对齐示例，左对齐可改为left: 20px; transform: translateY(-50%); */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

object-position取值规则和背景图的background-position完全一致，你可以根据图片焦点自定义水平、垂直方向的对齐规则，完全满足保留中心/右侧内容的需求。

方案2：背景图实现方案 #

如果可以接受调整HTML结构，用背景图实现的兼容性更好，也能满足宽屏自适应高度、小屏固定高度的需求，实现代码如下：

HTML修改

移除<img>标签：

<div class="banner-container full-width ">
  <div class="banner-text full">some text</div>
</div>

CSS代码

.banner-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  /* 宽屏状态：按图片比例自适应高度，以下为16:9图片比例示例，可替换为你的图片实际比例 */
  padding-top: 56.25%;
  /* 背景图相关配置 */
  background-image: url('/some-image.png');
  background-size: cover;
  background-repeat: no-repeat;
  /* 自定义裁剪位置，优先保留右侧就设为right center */
  background-position: right center;
}
/* 小于755px断点时切换为固定高度 */
@media (max-width: 755px) {
  .banner-container {
    padding-top: 0;
    height: 275px;
  }
}
/* 文字定位样式和方案1一致 */
.banner-text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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