Obcięcie grafiki / zdjęcia

Question

Witam.

Mam niewielki kłopot i nie wiem jak go ugryzć... po prostu czarna dziura we łbie.

Mam dajmy na to galerię zdjęć gdzie rozłożone są miniaturki w 3 kolumnach. Każda miniaturka ma np: width: 218px; height: 90px, czyli orientacja zdjęcia jest horyzontalna.

Czasami zdarza się że muszę dodać zdjęcie w orientacji wertykalnej. Szerokość miniatury zawsze jest stała (218px) ale chciał bym obciąć to zdjęcie w wysokości, tak by miał 90px.

Nie chodzi mi o skalowanie, ale o obcięcie górnej i dolnej części tego zdjęcia, tak by wyświetlana miniaturka mimo że jest wertykalna wyglądała jak horyzontalna.

Answer 1

Musisz stworzyć pojemnik na miniaturki, który będzie miał sztywne wymiary, zablokowane przelewanie zawartości oraz wycentrowaną treść.

.thumbnail{
  width: 219px;
  height: 90px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

Comments

Wielkie dzięki. Nie wiem dlaczego uparłem się na JS a nie na zwykłej klasie w CSS.