Próbuję zrobić układ zdjęć użytkowników Instagram, a właściwie zrobiłem to wcześniej w kursie siatki CSS

Problem to, że tym razem nie działa i nie wiem, jak próbowałem tak wiele rzeczy i nie wiem, dlaczego mój img nie zmienia rozmiaru do rozmiaru chcieć

pozwól mi pokazać kod

Więc to jest sposób, w jaki to zrobiłem

  return (
    <UserPhotosHero>
      <ContainUserPhotos>
        {specificPhotos &&
          specificPhotos.map(photo => {
            return (
              <AnimatePresence>
                <UserPersonalPhotos
                  key={photo.id}
                  variants={PopUp}
                  initial="hidden"
                  animate="visible"
                >
                  <img src={photo.photo} />
                </UserPersonalPhotos>
              </AnimatePresence>
            );
          })}
      </ContainUserPhotos>
    </UserPhotosHero>
  );
};

A to są style


// User Photos

export const UserPhotosHero = styles.section`

width: 75%;
min-height: 40vh;

margin: auto;
margin-bottom: 6rem;
margin-top: 4.5rem;


`;

export const ContainUserPhotos = styles.div`

display: grid;
grid-template-columns: repeat(3, minmax(100px, 293px));
justify-content: center;
grid-gap: 2.8rem;

`;

export const UserPersonalPhotos = styles(motion.div)`

position: relative;
cursor: pointer;

z-index: 2;

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

`;

Oczekiwany wyjście : Więc jak wspomniałem wcześniej, zrobiłem to w innym kursie i muszę spojrzeć na kod, więc mogę poprowadzić się, a więc spodziewałem się, że się wydarzy, 3 Kolumny, każda kolumna jest div, a wielkość evey div byłaby szerokość 293px, wysokość 293px, a jeśli zrobię okno blisko, zmieniłoby rozmiaru zarówno szerokości, jak i wysokości, ale jest to, co dostaję

Obraz z szerokością spodziewałem się, ale wysokość nie jest blisko 293px

Zdjęcie Układu Instagrama (brzydkie)

Dlaczego rozmiar IMG nie jest jeszcze blisko 293px? Co ja robię źle?

0
user15685422 21 kwiecień 2021, 06:05

1 odpowiedź

Najlepsza odpowiedź

Jesteś na mocy wskaźnika proporcji obrazu, biorąc pod uwagę podany kod. Jeśli twój obraz nie jest kwadratem, nie dostaniesz kwadratu. Nic w twoich stylu komponentów CSS ustawi wysokość; grid-template-columns określi tylko szerokość. Jeśli chcesz kwadratowy obraz, coś, co możesz spróbować owijać obraz w div z {x1}} i position: relative, a następnie, jeśli absolutnie umieściłeś swój obraz, powinien dać ci to, co chcesz ... Coś takiego (należy powiadomić, nie przetestowałem tego kodu):

.image-wrapper {
  padding-bottom: 100%; // this will give you an aspect ratio of 1:1 (square)
  position: relative;
  width: 100%;
  img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

Również ... Upewnij się, że dodawasz klucz do komponentu <AnimatePresence /> w funkcji mapy ... tablice komponentów w Reaguj wszystkie wymagają unikalnego klucza. Prawdopodobnie możesz użyć źródła obrazu jako klucza.

0
brianyates 21 kwiecień 2021, 03:25