如何用CSS固定图片宽度并裁剪高度，避免撑大容器？

我希望图片不会撑大所在容器的高度，当前图片会导致容器被整体拉高，效果如下：

<div class="event-presentation-featured">
  <div class="event-presentation-featued__image-container">
    <a href="...">
      <img class="event-presentation-featued__image" src="...">
    </a>
  </div>
  <div class="event-presentation-featured__content">
    ...
  </div>
  <div class="event-presentation-featured__actions">
    ...
  </div>
</div>

.event-presentation-featured {
    align-items: stretch;
    background-color: var(--color-white);
    display: flex;
    width: 100%;
}

.event-presentation-featued__image-container {
    flex-shrink: 1;
    max-width: 457px;
    position: relative;
}

.event-presentation-featued__image {
    top: 0;
    left: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

问题核心在于flex容器的align-items: stretch会强制拉伸子元素高度，加上图片设置height: 100%继承了被拉伸后的高度，导致容器被撑大。可以通过以下方式调整：

• 给图片容器添加align-self: start，规避flex容器的拉伸规则：

.event-presentation-featued__image-container {
    flex-shrink: 1;
    max-width: 457px;
    position: relative;
    align-self: start; /* 新增该行 */
}

• 若希望图片高度和内容区域匹配但不撑高容器，可修改flex容器的对齐方式：

.event-presentation-featured {
    align-items: flex-start; /* 替换原有的stretch */
    background-color: var(--color-white);
    display: flex;
    width: 100%;
}

另外注意到类名存在拼写错误：event-presentation-featued__image-container中的featued少了字母r，应为featured，建议统一修正类名避免样式失效。

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