retyui/react-quick-pinch-zoom

Need image to take up entire container

jonathanrstern opened this issue · 2 comments

jonathanrstern commented

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

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

fominv commented

@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.

  • 👍2