web-dev-qa-db-ja.com

背景画像の下部が途切れる

私のサイトはレスポンシブである必要があり、「モバイルファースト」で構築することになっています。これは1ページのサイトであり、各セクションはsvg画像で分割されています。

これまでのところ、background-size:cover;を使用して幅のサイズを完全に変更できましたが、画像の下部の小さな部分が切り取られています。高さ（自動、100％、ランダムなピクセル値）を調整しようとしましたが、何も起こらないようです：/何かアイデアはありますか？

#breakpink{
    background-image: url(../images/break_pink.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
}

完全なコード：

http://jsfiddle.net/duyBE/

htmlcssimagesvg
7
Nicole

同じ問題が私にも起こりました。このページの承認された回答に掲載されているこの問題の解決策があります： CSS：フルサイズの背景画像

解決策は次を使用することでした：background-size：100％100％

ただし、コンテンツと一緒に背景をズームアウトすると、「本体」の背景が下部に表示されるという欠点がありました。

10
Islam Elbahtiti
html { 
    background: url(../images/break_pink.svg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これはおそらくあなたの問題を解決します

2
Oussama el Bachiri

「background-size：cover」の代わりに「background-size：contain」を使用してください。

1背景サイズ：カバー

プロパティ値「cover」は、使用可能なスペースをカバーするように画像を作成します。画像が小さい場合は、使用可能なスペースをカバーするように拡大されます。画像が大きい場合は、使用可能なスペースをカバーするように縮小されます。 、使用可能なスペースを埋めるために画像がトリミングされる可能性があります。

長所：利用可能なスペース全体をカバーします。短所：画像がトリミングされる可能性があります。

2背景サイズ：含む

「含む」は、使用可能なスペース内に収まるように画像を拡大または縮小します。長所：画像全体が表示されます。短所：画像が引き伸ばされて見える場合があります。また、画像の周囲に空きスペースが表示される場合もあります。

1
Shrishail Uttagi

私も同様の問題を抱えていました。パディングボトムを追加しました：10px;そしてそれは私のために働いた。

1
leleprates

要素の下部にマージンを追加します。

#breakpink{
    background-image: url(../images/break_pink.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
    margin-bottom:10px;
}
0
suspectus

同様の問題がありました。画像ファイルがなんらかの奇妙な方法で破損していることが判明しました。ファイルシステムで画像を開くことはできましたが、画像は問題ありませんでしたが、ブラウザでこのエラーが発生しました。画像ファイルを削除して再度ダウンロードすると、cssルールで画像が適切に表示されました。

0
Miguel Salas
body{
    margin: 0;
    padding: 0;
    background: url(image.jpg);
    background-size: auto;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
    margin-bottom:10px;
    background-position: center;
    font-family: sans-serif;
}
0
Josh Trivedi

ヘッダー画像の下部が切り取られているという同様の問題がありました。を使用して解決しました

背景サイズ：含む;

0
Nero