1

画像用の歪んだマスク コンテナーの作成に取り組んでいます。

私が抱えている問題は、ブートストラップを使用してレスポンシブ レイアウトでイメージをコンテナーに塗りつぶすことです。

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 */         
}
4

1 に答える 1

0

まだ使えるはず

background-size: cover;

また、背景画像はコンテナに合わせて歪むため、画像を元の形に戻す負の歪曲値を使用して css ルールを設定します。

あなたの場合、それはtransform:skew(0deg,30deg);

于 2013-10-28T14:03:09.467 に答える