기울어 진 컨테이너 마스크로 이미지 채우기 - 반응 형 - CSS3

Question

이미지의 비뚤어진 마스크 ​​컨테이너를 만드는 중입니다.

문제 부트 스트랩을 사용하여 이미지를 반응 형 레이아웃으로 채우는 중입니다.

CSS 속성 배경 이미지를 사용하려고 시도했지만 background-size: cover;으로 설정했지만 배경 이미지가 컨테이너와 비뚤어졌습니다.

나는 컨테이너 안의 이미지를 설정하고 컨테이너의 높이와 너비의 중심을 맞추려고합니다.

여기 내 피들을 한번보세요.

http://jsfiddle.net/RyU9W/3/

편집 나는 내가 기울여 여분의 높이와 용기 원인의 너비를 조정 할 필요가 있지만 내가 거의 필요 않는다는 plugin 발견. 바이올린 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 */   
} 

Answer 1

당신은 여전히 ​​

012을 사용할 수 있어야합니다

이고 배경 이미지가 컨테이너와 비뚤어 지므로의 CSS 규칙을 음수 스큐 값으로 설정하면 이미지가 원래 모양으로 되돌아갑니다. 귀하의 경우에는

는 transform:skew(0deg,30deg);