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