Image overflows when SideBySideMagnifier gets a size smaller than the image

[theironman42]

Hello Adam, I was wondering if i would be possible to change the style of the image to make it stay in the SideBySideMagnifier and not go beyond it. As you can see in the example, the image is not keeping itself in the container. All the rest is working perfectly

Here is what i try to achieve:

Here's my code

 <ExampleContainer title="Side By Side Magnifier">
        <div className="flex">
          <SideBySideMagnifier
              className="input-position"
              style={{ order: switchSides ? "1" : "0", maxHeight: "40vh" }}
              imageSrc={image}
              largeImageSrc={image}
              alwaysInPlace={alwaysInPlace}
              overlayOpacity={overlayOpacity}
              switchSides={switchSides}
              zoomPosition="left"
            /> 

          <SideExampleControls
            handleBoolChange={this.handleBoolChange}
            handleOpacityChange={this.handleOpacityChange}
          />
        </div>
      </ExampleContainer>

[AdamRisberg]

It is being caused by your maxHeight styling. This component is designed to work by controlling the size using width (either the width of the component itself or of it's parent) and letting the height auto calculate. Remove the maxHeight, size it by width instead, and it should work correctly.

[theironman42]

Would I be able to have my image to a certain height? Because I have horizontal pictures and vertical ones, and I would like to have each one of the containers to be of the same height so that my page always has the same kind of layout.

The two different kind of pictures vertical:

horizontal:

[AdamRisberg]

This functionality isn't currently supported, so there is no elegant way of doing it. However, I came up with a workaround. Don't set max-height on the component itself. Instead, give the magnifier component a class so that you can target one of its children in CSS. In the example code, it has the class "input-position" (which I'll use in my code below). Use the following CSS (it will target only the preview image)...

.input-position > div > img {
    max-height: 200px; // Or whatever you want
    width: auto !important;
}

Lastly, you'll have to be careful about the component filling it's container (width wise, beyond the width of the image). In the example, the input-position class has width set to 50%. So, after adding the above CSS, the zoom functionality will behave as if the image is much wider than it is. Since it's in a flex container, removing that width: 50% from the input-position class will cause the controls container to expand, shrinking the magnifier component to fit it's image's width. Of course, in other situations, you could simply set the component's display property to inline-block to make sure that the component shrinks to fit it's content.