medium-image-zoom affect the image display

[tjx666]

With Zoom component:

import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

function App() {
  return (
    <div
      style={{
        margin: '20px',
        height: '100px',
        width: '100px',
        border: '2px solid red',
      }}
    >
      <Zoom>
        <img
          src="https://cdn.artiffuse.ai/generations/images/mu8ADtP5h9V0KcIHFoUEA_576x1024_20250122_230143_raw.webp"
          style={{
            maxWidth: '100%',
            maxHeight: '100%',
            objectFit: 'contain',
          }}
        />
      </Zoom>
    </div>
  );
}

export default App;

image height overflow:

No Zoom component, the image fit the div size:

online reproduce: https://stackblitz.com/edit/vitejs-vite-hgyeoboh?file=src%2FApp.tsx

[rpearce]

Hi, I'll check this out when I get some time! Thanks for the report.

[YanceyOfficial]

Hi, I found a solution, If you use TailwindCSS, you can add the follows code in your globals.css file to enforce the Zoom container has full width and full height.

@layer utilities {
  
  [data-rmiz] {
    @apply w-full h-full;
  }

  [data-rmiz-content] {
    @apply w-full h-full;
  }
}

[rpearce]

I'm sorry I haven't gotten to this yet. It seems like a legit issue