How can I set the ReactCompareSlider to maintain aspect ratio, with no cropping, and automatically resize to the available space?

[tpdickson]

I'm having trouble getting the ReactCompareSlider to behave how I want it to with regards to taking up the available space, and maintaining the aspect ratio.

For example, if I have an img:

<img
  src={originalImage}
  alt=""
  className="size-full object-contain"
/>

with Tailwind CSS classes size-full and object-contain, it will take up all of the available space in the parent container, up to the point that either the width or height reaches the edges, then it will automatically scale the other dimension to maintain the correct aspect ratio:

(in this case, the parent container takes up the entire screen, and is an "overlay")

However, when I try to get the same behavior with ReactCompareSlider, I get all sorts of funky results:

Simply putting size-full and object-contain on the ReactCompareSlider:

<ReactCompareSlider
  className="size-full object-contain"
  itemOne={<img src={originalImage} alt="" className="" />}
  itemTwo={<img src={originalImage} alt="" className="" />}
/>

(I'm using the same image in itemOne and itemTwo for simple testing right now.)

Here's what it looks like:

Then if I also put size-full and object-contain on the items' img elements:

<ReactCompareSlider
  className="size-full object-contain"
  itemOne={<img src={originalImage} alt="" className="size-full object-contain" />}
  itemTwo={<img src={originalImage} alt="" className="size-full object-contain" />}
/>

It looks good initially:

But the actual slider part of it ends up overlaying the entire screen, since it is "detached" from the aspect ratio of the item components:

A side effect is that I can't click the buttons on the top right, since the slider takes up the entire screen:

---

How would I go about fixing this to get it to behave as I want it to?

[nerdyman]

@tpdickson I'm not certain but think size-full on the slider component itself is the problem. It shouldn't need any custom classes to fit correctly as the slider always fits to the bounds of whatever is in itemOne.

It looks like size-full is setting everything to be full width and height but the image is set to contain so the slider is filling the container and the image is being scaled down.

[tpdickson]

Thanks for looking at this quickly.

Here's with the slider component css classes removed:

<ReactCompareSlider
  itemOne={<img src={originalImage} alt="" className="size-full object-contain" />}
  itemTwo={<img src={originalImage} alt="" className="size-full object-contain" />}
/>

It doesn't scale up to the entire screen when the screen is larger than the base image resolution:

It doesn't scale down when the screen is smaller vertically:

(it does, however, correctly keep the slider within the bounds of the image)

It does behave exactly how I want it to when the screen is smaller horizontally than the image:

---

So the next attempt is to change size-full (height: 100%, width: 100%) to h-screen and w-screen (height: 100vh, width: 100vw):

<ReactCompareSlider
  itemOne={<img src={originalImage} alt="" className="h-screen w-screen object-contain" />}
  itemTwo={<img src={originalImage} alt="" className="h-screen w-screen object-contain" />}
/>

This causes the ReactCompareSlider to overflow the bounds of the image. The image, however, is doing exactly what I want it to do. It correctly scales down when the width of the screen is squished:

Also when the height of the screen is squished:

When the screen is larger than the image, it also correctly scales up:

It seems like the object-contain (object-fit: contain) is being applied to the images, but not doing anything to restrict the bounds of the parent ReactCompareSlider.

---

Sorry if I'm missing something fundamental to how this works, I'm very new to web front end.

[nerdyman]

@tpdickson No worries, it's a bit of a tricky issue. My first comment about the slider fitting the bounds won't work when object-fit is used because the image width and height doesn't change, the browser scales down the image to fit but the actual width and height remain the same. There are more deets on MDN.

I'll look at getting a repro and post a link here, let me know if you find a solution in the meantime!

[nerdyman]

@tpdickson I think this does what you need, it fills the width and height up to the intrinsic size of the image and scales it down without clipping it when the bounds shrink.

https://stackblitz.com/edit/vitejs-vite-di5xps?file=src%2FApp.tsx&terminal=dev

<ReactCompareSlider
    style={{ maxHeight: '100%' }}
    itemOne={
      <ReactCompareSliderImage
        src="https://dummyimage.com/640x360/aaa/eee?text=One"
        alt="one"
        style={{ objectFit: 'contain', height: 'auto', maxHeight: '100%' }}
      />
    }
    itemTwo={
      <ReactCompareSliderImage
        src="https://dummyimage.com/640x360/eee/aaa?text=Two"
        alt="Two"
        style={{ objectFit: 'contain', height: 'auto', maxHeight: '100%' }}
      />
    }
  />

[tpdickson]

Yea to me at least, this has been a doozy. I've been playing around with the styles, trying to get the same behavior in a simple:

<div
  style={{ }}
>
  <img
    src="https://dummyimage.com/640x360/aaa/eee?text=One"
    alt="one"
    style={{ }}
  />
</div>

and have had no luck. Always at least one undesirable behavior no matter what I've tried. So it's not necessarily a problem with ReactCompareSlider, more of a problem with getting the CSS correct (if it's even possible).

I'm leaning more and more towards the thought that I'll have to ditch having the images scale up to the screen size.

Thanks for the help again though, I really do appreciate it.

[tpdickson]

I asked on the Tailwind CSS discord about getting the behavior of width: 100vw, height: 100vh, objectFit: contain, but without the img element being larger than the displayed image, and someone who works on Tailwind replied that I should look into using JavaScript to get it to work. It's very likely not doable with just CSS.

[nerdyman]

@tpdickson If you know the aspect ratio of the image you can use the aspect-ratio CSS property to force the slider to keep those bounds. I've updated the demo, hopefully it works 🙏

If you don't know it initially you can use JS to get the natural width and height of the image to determine the aspect ratio.

[tpdickson]

Unfortunately there's no upscaling on that. I tried a useEffect approach and calculating the image size based on the window size. It works for properly resizing the image, now I need to figure out how to get the slider to be properly contained and centered:

import {
  ReactCompareSlider,
  ReactCompareSliderImage,
} from 'react-compare-slider';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
  const [imageSize, setImageSize] = useState({
    width: 0,
    height: 0,
  });
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const imageDisplaySize = calculateImageDisplaySize(
    windowSize.width,
    windowSize.height,
    imageSize.width,
    imageSize.height
  );

  return (
    <ReactCompareSlider
      style={{}}
      itemOne={
        <ReactCompareSliderImage
          src="https://dummyimage.com/640x360/aaa/eee?text=One"
          alt="One"
          style={{
            margin: 'auto',
            width: `${imageDisplaySize.width}px`,
            height: `${imageDisplaySize.height}px`,
          }}
          onLoad={(event: React.SyntheticEvent<HTMLImageElement>) => {
            setImageSize({
              width: event.currentTarget.naturalWidth,
              height: event.currentTarget.naturalHeight,
            });
          }}
        />
      }
      itemTwo={
        <ReactCompareSliderImage
          src="https://dummyimage.com/640x360/eee/aaa?text=Two"
          alt="Two"
          style={{
            margin: 'auto',
            width: `${imageDisplaySize.width}px`,
            height: `${imageDisplaySize.height}px`,
          }}
        />
      }
    />
  );
}

export default App;

function calculateImageDisplaySize(
  windowWidth: number,
  windowHeight: number,
  imageWidth: number,
  imageHeight: number
): { width: number; height: number } {
  // calculate the image display dimensions
  const windowAspectRatio = windowWidth / windowHeight;
  const imageAspectRatio = imageWidth / imageHeight;

  let newImageWidth, newImageHeight;

  if (imageAspectRatio > windowAspectRatio) {
    newImageWidth = windowWidth;
    newImageHeight = imageHeight * (windowWidth / imageWidth);
  } else if (imageAspectRatio < windowAspectRatio) {
    newImageWidth = imageWidth * (windowHeight / imageHeight);
    newImageHeight = windowHeight;
  } else {
    newImageWidth = windowWidth;
    newImageHeight = windowHeight;
  }

  return { width: newImageWidth, height: newImageHeight };
}

2024-05-21.18-35-04.mp4

---

The margin: 'auto' on the images is just the current attempt at getting the images properly centered and the slider contained around them, it doesn't work though. I need to play around with it more.

[tpdickson]

I added a div around the slider and it seems to do everything I want it to do.

Here's the div:

<div
  style={{
    display: 'flex',
    justifyContent: 'center',
  }}
>
  ...
</div>

And here's the full demo code:

import {
  ReactCompareSlider,
  ReactCompareSliderImage,
} from 'react-compare-slider';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
  const [imageSize, setImageSize] = useState({
    width: 0,
    height: 0,
  });
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const imageDisplaySize = calculateImageDisplaySize(
    windowSize.width,
    windowSize.height,
    imageSize.width,
    imageSize.height
  );

  return (
    <div // <----------------------------------------this div and its style are new
      style={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <ReactCompareSlider
        style={{}}
        itemOne={
          <ReactCompareSliderImage
            src="https://dummyimage.com/640x360/aaa/eee?text=One"
            alt="One"
            style={{
              width: `${imageDisplaySize.width}px`,
              height: `${imageDisplaySize.height}px`,
            }}
            onLoad={(event: React.SyntheticEvent<HTMLImageElement>) => {
              setImageSize({
                width: event.currentTarget.naturalWidth,
                height: event.currentTarget.naturalHeight,
              });
            }}
          />
        }
        itemTwo={
          <ReactCompareSliderImage
            src="https://dummyimage.com/640x360/eee/aaa?text=Two"
            alt="Two"
            style={{
              width: `${imageDisplaySize.width}px`,
              height: `${imageDisplaySize.height}px`,
            }}
          />
        }
      />
    </div>
  );
}

export default App;

function calculateImageDisplaySize(
  windowWidth: number,
  windowHeight: number,
  imageWidth: number,
  imageHeight: number
): { width: number; height: number } {
  const windowAspectRatio = windowWidth / windowHeight;
  const imageAspectRatio = imageWidth / imageHeight;

  let newImageWidth, newImageHeight;

  if (imageAspectRatio > windowAspectRatio) {
    newImageWidth = windowWidth;
    newImageHeight = imageHeight * (windowWidth / imageWidth);
  } else if (imageAspectRatio < windowAspectRatio) {
    newImageWidth = imageWidth * (windowHeight / imageHeight);
    newImageHeight = windowHeight;
  } else {
    newImageWidth = windowWidth;
    newImageHeight = windowHeight;
  }

  return { width: newImageWidth, height: newImageHeight };
}

---

I still wonder if there's a way to do it in pure CSS without any javascript/typescript, but... that's for another time.

Thanks a ton for the help. Narrowing down the problem made it quite a bit easier to come to a full solution, and also a simpler, CSS-only solution if I do decide to get rid of upscaling in the future.