如何在固定尺寸div中适配图片？React+CSS问题求助

直接给你一套可落地的代码方案，核心是通过布局属性配合图片限制规则解决问题：

React 组件示例 #

import React from 'react';
import './ImageTextContainer.css';

const ImageTextContainer = () => {
  return (
    <div className="container">
      <div className="image-wrapper">
        <img src="你的图片地址" alt="内容描述" className="responsive-image" />
      </div>
      <div className="text-content">
        {/* 文本内容区域 */}
        这是占容器70%宽度的文本内容
      </div>
    </div>
  );
};

export default ImageTextContainer;

对应 CSS 代码 #

.container {
  display: flex; /* 实现左右分栏布局 */
  width: 100%; /* 占满父元素宽度 */
  height: 400px; /* 可根据需求调整，或用min-height自适应 */
}

.image-wrapper {
  width: 30%; /* 占容器30%宽度 */
  height: 100%; /* 继承容器高度，避免高度塌陷 */
  display: flex; /* 启用flex实现图片居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.responsive-image {
  max-width: 100%; /* 图片宽度不超出容器 */
  max-height: 100%; /* 图片高度不超出容器 */
  object-fit: contain; /* 保持宽高比，完整显示图片不拉伸 */
  image-rendering: crisp-edges; /* 优化缩放后的清晰度，避免模糊 */
}

.text-content {
  width: 70%; /* 占容器70%宽度 */
  padding: 1rem; /* 可选，给文本添加内边距提升可读性 */
}

关键说明 #

你之前用object-fit等方案没生效，大概率是因为图片容器没有设置明确高度——只有容器高度确定时，max-height:100%才能限制图片高度。另外：

• flex布局确保图片和文本按比例分栏，同时图片容器的flex属性能让图片完美居中
• object-fit:contain保证图片缩放时保持原始比例，不会变形或溢出
• image-rendering: crisp-edges优化图片缩小后的显示效果，避免模糊

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