Клипинг нескольких изображений внутри родителя.

[architec]

Доброго всем дня, уважаемые эксперты!

Как решается такая задача:

<div class="ls-rubber-block ls-bg-heavenly">
	<div id="ls-img-01"></div>
	<div id="ls-img-02"></div>
</div>

html
{
	height: 100%;
}

body
{
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'PT Sans Caption', sans-serif;
}

/* Блок, который рвстягивается по высоте и ширине на 100% */
.ls-rubber-block
{
	width: 100%;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
	border: 0px solid #FF0004;
	overflow: hidden;
	clip: rect(0, 100%, 0, 100%);
}

#ls-img-01
{
	position: absolute;
	display: block;
	
	width: 700px;
	height: 600px;
	
	top: -200px;
	right: 30px;
	
	box-sizing: border-box;
	border: 0px solid #cccccc;
	
	background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_flowerpot.png);
	background-size: 700px 600px;
	background-repeat: no-repeat;
	background-position: center center;
}

#ls-img-02
{
	position: absolute;
	display: block;
	
	width: 730px;
	height: 520px;
	
	top: 600px;
	right: -30px;
	
	box-sizing: border-box;
	border: 1px solid #cccccc;
	
	background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_tablet.png);
	background-size: 730px 520px;
	background-repeat: no-repeat;
	background-position: center center;
}

Внутри родителя два блока, у каждого фоновое изображение. Собственно можно не фоном а через <img> тег.
Как обрезать эти изображения родительским блоком?
Если ставить clip, например, родителю, то сложность в том, что родитель резиновый и принимает 100% на 100% размер экрана.  А вот такая конструкция:

clip: rect(0, 100%, 0, 100%);

Не дала видимого результата...
Стремлюсь повторить такой же заголовок как здесь: http://gaze.tommusdemos.wpengine.com/homepages/startup-tokyo/#
Благодарю за помощь!

Ответ найден!
Тем, кому это интересно:
Я изучил ссылку на предмет свойств css и нашел там такие строки:

Цитата

overflow: hidden;
transform: matrix(1, 0, 0, 1, 0, 0);

Признаюсь, удивлен, ведь transform задействует преобразование объекта, но вот что он его обрезает - никак не мог представить. И признаться так и не понимаю до конца как это работает, но работает!
Рекомендую для кросбраузерности добавить так:
 

Цитата

overflow: hidden;
    transform: matrix(1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    -o-transform: matrix(1, 0, 0, 1, 0, 0);
    -ms-transform: matrix(1, 0, 0, 1, 0, 0);

Желаю сем удачи!

Edited December 13, 2018 by architec

[Switch74]

посмотрите в сторону cover
http://jsfiddle.net/whutzgaq/
для background тоже есть подобный функционал