Верстка,- вывод изображения в искаженной рамке

Здравствуйте уважаемые форумчане.

Нужен совет или помощь от опытных верстальщиков.

Задача для меня крайне сложная, решений ее в гугле я не нашел.

Пытаюсь набраться опыта и верстаю тестовый макетик.

Сейчас сделал вот что:

В этой верстке на данный момент три изображения-параллелограмма являются прозрачными картинками png. Но предполагаю, что готовая верстка должна обрабатывать обычные прямоугольные/квадратные jpg картинки и приводить их в этот вид, при том, что изображения искажаться не должны. Вопрос - как?

Теория и предположения:

• Делаем два Div-блока, родительский и дочерний.
• Родительский блок для вставки изображения с изменением его масштаба до размеров параллелограмма с сохранением пропорций этого изображения.
• Дочерний блок формирует параллелограмм с прозрачной внутренней областью и закрывающий определенные области вне параллелограмма. При том, что закрывать цветом, эти выезжающие за пределы параллелограмма части картинки, не получится, потому как сиреневый фон является градиентом.

Требуется помощь бывалых. Я даже теорию пока написать (в код) не могу.

Если нужна будет имеющаяся верстка (та, что на картинке), то загружу сюда. Но требуется по сути только модель кода для вывода обычной прямоугольной картинки в параллелограмм.

Заранее большое спасибо!