CSSの背景サイズは親を塗りつぶします

固定背景を使用したいdivがあります。また、bg画像から最適なフィットを得るためにバックグラウンドサイズのカバーを使用しています。問題は、divの親をカバーするかのように背景イメージが拡大縮小されることです。 div自体ではありません。これを修正する方法はありますか？CSSの背景サイズは親を塗りつぶします

.panel-image { 
    height:100vh; 
    width:50%; 
    background-size:cover; 
    background-attachment:fixed; 
    background-position:center; 
    background-image:my-image.jpg; 
} 

.parent{ 
    height:100vh; 
}

ここはオンラインの例です。ソースイメージで、まだパネル画像のdivがはるかに広いであるかのように画像がまだ大きくトリミングされたように、パネル画像のdivは、正方形である：あなたがの高さを設定しているので、

http://jsbin.com/siweloxebe/edit?html,css,output

出典

2016-10-13 Ben Gannaway

てみてください追加表示：インラインブロック; 〜.panel-image – Barry127

ありがとう、でも同じです –

はい私は、画像を最小限のトリミングで快適にカバーするために画像を取得しようとしています。それは、固定されている必要があります –

それはです子divは親と同じです。

私はあなたのコードhereの周りプレイしました、それは罰金だ、または私はあなたの質問を誤解している可能性があり

出典

2016-10-13 13:26:54 Elena

それはまだそれが親をカバーする必要があるように動作するようです。今見ていると正方形のパネル画像divと正方形の画像では、画像は実質的に切り取られていないはずですが、パネル画像が親と同じ幅であるかのように切り取られて表示されます。 http://jsbin.com/siweloxebe/edit?html,css,output –

ああ、私の悪い。私は '' 'background-attachment：fixed;' 'を取り出し、修正されたようだ。 http://jsbin.com/josagusuvo/edit?html,css,output – Elena

CSSの背景サイズは親を塗りつぶします

答えて

関連する問題