如何在img元素上结合object-fit:contain与固定aspect-ratio？

我尝试在<img>元素上结合使用object-fit: contain与aspect-ratio: 1.5，但图像仍保持正方形。需求是强制图像采用3:2的宽高比，实现自动黑边效果，让CSS根据容器宽高比自动选择width:100%或height:100%，且仅用纯CSS实现。

背景：服务器返回的图片比例错误（输出宽度应为实际显示的两倍），已知正确显示比例，<img>位于动态可调整容器中。

当前表现：

• 图片可响应缩放
• 设置的aspect-ratio未生效

期望表现：

• 图片可响应缩放
• 强制3:2宽高比，忽略原图尺寸

复现代码 #

JavaScript（仅用于面板拖拽） #

// Javascript for example resizing panels only.

const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');
const panelHandle = document.querySelector('.panel-handle');

let isDragging = false;

panelHandle.addEventListener('mousedown', (e) => {
    isDragging = true;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
    if (!isDragging) return;

    const containerWidth = document.body.clientWidth;
    const newLeftWidth = e.clientX;

    if (newLeftWidth < 0 || newLeftWidth > containerWidth - panelHandle.offsetWidth) return;

    const newRightWidth = containerWidth - newLeftWidth - panelHandle.offsetWidth;

    leftPanel.style.width = `${newLeftWidth}px`;
    rightPanel.style.width = `${newRightWidth}px`;
}

function onMouseUp() {
    isDragging = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
}

CSS #

/* img scaling */

img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* has no effect */
  aspect-ratio: 1.5;
}

/* panel resizing */

body {
  display: flex;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

.left-panel,
.right-panel {
  height: 100%;
}

.left-panel {
  background-color: lightblue;
  width: 50%;
}

.right-panel {
  background-color: lightcoral;
  flex-grow: 1;
  text-align: center;
}

.panel-handle {
  width: 10px;
  background-color: gray;
  cursor: ew-resize;
}

HTML #

<div class="left-panel">
  <img src="https://picsum.photos/400" draggable="false" />
</div>
<div class="panel-handle">
</div>
<div class="right-panel">
  <div>
    Drag the center bar to resize these panels.
  </div>
  <div>
    The image should be a 3:2 aspect ratio but is it's instrinsic square.
  </div>
</div>

解决方案 #

问题根源是你同时给<img>设置了width:100%和height:100%，这会完全固定元素尺寸，导致aspect-ratio的约束失效。要实现需求，需要给图片套一个中间容器，让容器强制执行宽高比，再让图片在容器内适配：

修改后的CSS #

/* 新增图片容器样式 */
.img-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 强制容器宽高比为3:2 */
  aspect-ratio: 1.5;
  /* 设置黑边背景 */
  background-color: #000;
}

/* 修改图片样式 */
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 保留原有面板样式并补充布局 */
body {
  display: flex;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

.left-panel,
.right-panel {
  height: 100%;
  /* 让面板内部容器能居中并占满空间 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-panel {
  background-color: lightblue;
  width: 50%;
}

.right-panel {
  background-color: lightcoral;
  flex-grow: 1;
  text-align: center;
}

.panel-handle {
  width: 10px;
  background-color: gray;
  cursor: ew-resize;
}

修改后的HTML #

<div class="left-panel">
  <div class="img-container">
    <img src="https://picsum.photos/400" draggable="false" />
  </div>
</div>
<div class="panel-handle">
</div>
<div class="right-panel">
  <div>
    Drag the center bar to resize these panels.
  </div>
  <div>
    The image should be a 3:2 aspect ratio but is it's instrinsic square.
  </div>
</div>

原理说明 #

1. 容器强制宽高比：img-container通过aspect-ratio:1.5固定3:2比例，同时width:100%和height:100%让它尽可能占满父面板空间。当父面板宽高比大于3:2时，容器会以高度为准自动缩小宽度；反之则以宽度为准缩小高度，自动适配容器空间。
2. 图片居中适配：容器用flex布局让图片居中，图片设置max-width:100%和max-height:100%，配合object-fit:contain确保完整显示，超出部分由容器的黑色背景填充形成黑边。
3. 面板布局优化：给left-panel添加flex布局属性，确保内部容器能居中并充分利用面板空间。

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