Необычный слайдер в форме параллелограмма

Question

[enchikiben]

Добрый день!
Помогите сверстать необычный сладер в форме параллелограмма. Можно ли растянуть картинку на весь параллелограмм?

вот что у меня получилось: jsfiddle.net/enchikiben/bHeJC/

Answer 1

[AlexKeller]

Попробуйте DIV-у с картинкой прописать background-size: 100%:
jsfiddle.net/bHeJC/12/

Не фонтан, конечно, но если подобрать картинки немного похожие по пропорциям с параллелограммом, но не так уж и плохо…

Answer 2

[Макс Кузнецов]

Я не верстальщик, но опыт в вебе есть. Такое обычно верстается путем наложения «маски» в форме параллелограмма поверх картинки, а не путем вписывания картинки внутрь параллелограмма.
p.s^ еще вам нужно ограничить ширину и высоту фотки, чтобы ее было видно всю, а не часть. Но ограничить с запасом, вдруг фотка будет больше в высоту, а не в ширину?

Answer 3

[pomeo]

.images > div {
   -webkit-transform: scale(1.5,1.5);   
}

если пропорции не важны то scale(1.5,1)

Comments

[enchikiben]

эм… не хочется искажать картинку масштабами…

Answer 4

[pxx]

Не очень доходчиво описан желаемый результат. Допускаю, что вы хотели так

Answer 5

[The Whiz]

Почему бы не сделать обычный слайдер, а сверху бросить два треугольных дива, которые послужат маской?