如何让图片适配CSS Grid容器高度且完整显示？

需求：让图片适配CSS Grid容器的高度，同时保持占容器一半宽度的效果；要求仅调整图片高度适配容器，不使用overflow: hidden，且完整显示图片。

曾参考过Stack Overflow上关于CSS Grid布局中图片尺寸控制的问题。

现有代码：

import { FC } from 'react';

import './style.css';

export const App: FC<{ name: string }> = () => {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        border: '1px solid red',
        maxHeight: 250,
      }}
    >
      <img
        style={{ width: '100%', maxHeight: '100%', objectFit: 'cover' }}
        src="https://picsum.photos/id/237/200/300"
      />
      <h1>hello</h1>
    </div>
  );
};

当前效果：

可在Stackblitz查看完整代码示例。

修改图片的样式属性，确保图片完整适配容器高度且不裁剪：

import { FC } from 'react';

import './style.css';

export const App: FC<{ name: string }> = () => {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        border: '1px solid red',
        maxHeight: 250,
      }}
    >
      <img
        style={{ 
          width: '100%', 
          height: '100%',
          objectFit: 'contain',
          objectPosition: 'center'
        }}
        src="https://picsum.photos/id/237/200/300"
      />
      <h1>hello</h1>
    </div>
  );
};

• objectFit: 'contain'会让图片按原始比例缩放，完整显示在容器内，不会裁剪图片，同时维持宽高比；
• 将maxHeight: '100%'改为height: '100%'，确保图片高度完全匹配Grid容器的行高；
• objectPosition: 'center'可让图片在Grid单元格内居中展示，优化视觉效果，不需要可省略。

内容的提问来源于stack exchange，提问作者sir-haver