Получить высоту изображения в сетке React

Question

Я делаю галерею сетки кладки в React, и у меня проблемы с получением высоты изображения после загрузки и перед изменением размера с помощью сетки. У меня есть обработчик onLoad на img, но там я получаю только высоту изображения с уже измененным размером там, где она должна быть оригинальной, чтобы использовать ее для вычисления количества интервалов строк. Я знаю, что это может быть чисто css проблема, но я не знаю, как ее решить.

Вот мой useEffect:

  useEffect(() => {
    if (imageRef.current && !loading) {
      const height = imageRef.current.clientHeight;
      console.log('height', height);
      const spansCount = Math.ceil(height / 10 + 1);
      setSpansCount(spansCount);
    }
  }, [imageRef.current, loading]);

А вот мой render:

 return (
    <div
      {...rest}
      className={styles.gallery__item}
      style={{ gridRowEnd: `span ${spansCount}` }}
    >
      <img
        src={image.previewURL}
        ref={imageRef}
        className={styles.gallery__img}
        alt={image.tags}
        onLoad={handleLoad}
      />
      <Placeholder
        ref={loaderRef}
        style={loading ? { display: 'block' } : { display: 'none' }}
      />
    </div>

Вот мой нерабочий Codesandbox .

А вот рабочий Codesandbox с react-load-image, но я не уверен, почему это работает, а первый - нет.

Answer 1

Мне просто нужно изменить css на изображении:

.gallery__img {
  width: 100%;
  height: auto; // not 100%
}