Trudniejsze zadanie html/css

Question

Jak zrobic aby zdjecia w galerii nie byly skalowane jak obecnie (sa zwerzanie i traca proporcje)
Ale zeby byly w ogyginalnych proporcjach lub aby byl wyodczny ich fragment... Byle by proporcje byly zachowane (nie musi byc widoczne cale zdjecia) bo i tak jest modal po kliknieciu w nie.

LINK

 

Answer 1

1.

.item {
    margin: 0 !important;
    height: 353px
}

usunąć height 

2.

do:

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

dodać:

    overflow: hidden;
    height:200px;

@edit: z ciekawości, dlaczego co chwilę stostujesz !important?

Comments

A to juz pytanie do autora strony, ja nim nie jestem ;)

---

Imo twoje rozwianie nie do konca niweluje kurczenie obrazkow, ja to zrobilem dodajac tylko 

 

.owl-carousel .owl-item img {
    width: 150%;
}

 

Answer 2

Musisz z tagu <a> wyłączyć height:100%.

Wtedy zdjęcie zachowa proporcje, ale będzie zbyt małe w pionie. Wtedy możesz się pobawić z kolei width, zwiększając %.

Zdjęcie będzie się powiększało od lewego górnego rogu, ale na to też można coś zaradzić.