在react中调整图像大小并使其适合父div

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

const ImageContainer = () => {
  return (
    <div className="image-container">
      <img src="your-image-url" alt="your-image" />
    </div>
  );
};

export default ImageContainer;

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}

import React from 'react';

const ImageContainer = ({ imageUrl }) => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>
      <img src={imageUrl} alt="your-image" style={{ maxWidth: '100%', maxHeight: '100%' }} />
    </div>
  );
};

export default ImageContainer;

import React from 'react';
import ImageContainer from './ImageContainer';

const App = () => {
  return (
    <div>
      <ImageContainer imageUrl="your-image-url" />
    </div>
  );
};

export default App;