css - 在倾斜的容器掩码中填充图像 - 响应式 - CSS3

Question

我正在为图像创建倾斜的蒙版容器。

我遇到的问题是使用 Bootstrap 使图像以响应式布局填充容器。

我尝试使用 css 属性背景图像并设置 background-size: cover; 但背景图像随容器倾斜。

我将尝试在容器内设置图像并居中/匹配容器的高度和宽度。

请在这里看看我的 fiddle 。 http://jsfiddle.net/RyU9W/3/

编辑

我找到了一个 plugin这几乎可以满足我的需要，尽管我需要针对倾斜导致的容器的额外高度和宽度进行调整。

更新 fiddle 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

你仍然应该能够使用

background-size: cover;

并且由于您的背景图像会随着容器倾斜，请为其设置一个 css 规则具有负偏斜值，这将使图像恢复到其原始形式。

在您的情况下，它将是 transform:skew(0deg,30deg);