Заполнить изображение в перекошенной маске контейнера — Адаптивный — CSS3

Я работаю над созданием контейнеров с перекошенной маской для изображений.

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

Я попытался использовать фоновое изображение свойства css и установить background-size: cover;, но фоновое изображение искажается контейнером.

Я попытаюсь установить изображение внутри контейнера и центрировать/соответствовать высоте и ширине контейнера.

Пожалуйста, взгляните на мою скрипку здесь. http://jsfiddle.net/RyU9W/3/

ИЗМЕНИТЬ

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

Обновленный скрипт http://jsfiddle.net/RyU9W/5/

HTML

    <div class="profile">
        <div class="image"></div>
        <div class="detail"></div>
    </div>

    <div class="profile">
        <div class="image"><img src="http://placekitten.com/g/700/1350" alt=""></div>           
        <div class="detail"></div>
    </div>

CSS

.profile .image {
    position: relative;
    overflow: hidden;
    height: 400px;
    background: #000 url(http://placekitten.com/g/700/1350) center center;
    background-size: cover;
    -webkit-background-size: cover;
    margin-bottom: 15px;
    transform:skew(0deg,-30deg);
    -ms-transform:skew(0deg,-20deg); /* IE 9 */
    -webkit-transform:skew(0deg,-30deg); /* Safari and Chrome */            
}
.profile .image img {
    position: absolute;
    top: -150px;
}
.profile .image * {
    position: relative;
    transform:skew(0deg,30deg);
    -ms-transform:skew(0deg,30deg); /* IE 9 */
    -webkit-transform:skew(0deg,30deg); /* Safari and Chrome */         
}

css responsive-design skew
person hyperdrive    schedule 05.09.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы все еще должны быть в состоянии использовать

background-size: cover;

и поскольку ваше фоновое изображение перекошено контейнером, установите для него правило css с отрицательными значениями перекоса, которое вернет изображение в исходную форму.

В вашем случае это будет transform:skew(0deg,30deg);

person jacek_podwysocki    schedule 28.10.2013
comment
Это старо, но решение в моей второй скрипке хорошо работает для меня. Причина, по которой фоновое покрытие не будет работать, заключается в том, что его нужно будет применить к перекошенному контейнеру. Если он применяется к элементу внутри преобразованного контейнера, высота не будет соответствовать преобразованному контейнеру, поскольку браузер не распознает высоту после преобразования. Мне нужно было сопоставить высоту родительского контейнера с помощью вычисления триггера в javascript и добавить его к изображению с -margin, чтобы подтолкнуть его вверх. - person hyperdrive; 30.10.2013