search

retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
310 stars 47 forks source link

Need image to take up entire container #78

Closed jonathanrstern closed 1 year ago

jonathanrstern commented 1 year ago

Incredible library!

Is there a way to get the image to scale up (on initial load) so that it occupies the entire container?

retyui commented 1 year ago

can you show me an example how it should looks like ?

fominv commented 1 year ago

@jonathanrstern

The QuickPinchZoom component has a containerProps. I used it to set Tailwind classes via className, but you could also probably use the style prop directly:

<QuickPinchZoom onUpdate={onUpdate} containerProps={{ className: "fixed inset-0" }}>
  <img
    ref={imgRef}
    alt="Image for review"
    src={lastImage.url}
    className="w-full h-full object-cover"
  />
</QuickPinchZoom>

In your case, you could use w-full h-full instead of fixed inset-0.