'Having a problem with the width of a zoomable image element

I made an image viewer component to pinch-zoom in its mobile app using react ionic. My problem is that when I zoom the image, it will be zoomed just to the image's width. I want the image to be zoomed to the edge of the card padding. here are my codes

<React.Fragment>
  <IonCard id="ImgViewCard">
    <IonCardContent>
      <TransformWrapper>
        <TransformComponent>
          <IonImg id="ImgViewImage" src={prop.ImgSource}></IonImg>
        </TransformComponent>
      </TransformWrapper>
    </IonCardContent>
  </IonCard>
</React.Fragment>;

#ImgViewCard {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ImgViewImage {
  height: 370px;
}

enter image description here

enter image description here

How can I fix this? What is your suggestion?

htmlcssreactjsimageionic-framework


Solution 1:[1]

You can wrap the image in a container using the full width of the container.

<div class="container">
  <div class="image-card">
      <img src="">
</div>
</div>

.image-card

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  
}

I think this will help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hardik

Related Questions