Search the Community

Доброго всем дня, уважаемые эксперты! Как решается такая задача: <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 и нашел там такие строки: Признаюсь, удивлен, ведь transform задействует преобразование объекта, но вот что он его обрезает - никак не мог представить. И признаться так и не понимаю до конца как это работает, но работает! Рекомендую для кросбраузерности добавить так: Желаю сем удачи!