私は自分のウェブサイトの背景画像として持っている2500x3500ピクセルの画像を持っています。私はCSSでカバーするために、バックグラウンドの大きさを設定すると、画面全体の幅に合わせて画像を取得し、スクロールで全高を表示するにはどうすればいいですか？
body {
background-image: url(coolaid.jpg);
background-size: cover;
}
画像が正しくウェブサイトをカバーするためにスケールが、それは垂直方向の画像であるとして、下半分が切り取られます。画像全体が表示されるようにするにはどうすればよいですか（ページの高さを画像に合わせる）
あなたはイメージを完全に見られるようにしたい場合は、ボックスの比率は、画像の比率を一致する必要があります：
html {
background:url(http://dummyimage.com/2500x3500/) no-repeat red;
background-size:cover;
height:140vw;
}どのように比率を取得できますか？
25分の35 = 1.4
幅が100vwです。
分の高さは次のようになります。
100vw X 1.4 = 140vw
ありがとう！それは素晴らしかった！ –
GC、私はCSSでその比率をハードコーディングする以上のことを期待していました。 Jk。 –
@AndreiGheorghiu何を意味しますか？、背景として、イメージは存在しません:)イメージの割合を取得するためのスクリプトか、ドキュメントを展開するためのスクリプトが必要です。 –
body {
background-image: url(http://beerhold.it/3500/2501);
background-size: cover;
background-position: 50% 50%;
min-height: 100vh;
}これはトリックを行う必要があります。
body
{
background-image: url(coolaid.jpg);
background-size: cover;
overflow: auto;
}
あなたが何をしたいのか、あなたの<body>の隠し要素と直接の子としてのイメージを配置します。 （
body {
background: transparent url(https://dummyimage.com/2500x3500/000000/fff) no-repeat 50% top /cover;
margin: 0;
}
body>img.hidden {
position: absolute;
visibility: hidden;
width: 100%;
height: auto;
}<img class="hidden" src="https://dummyimage.com/2500x3500/000000/fff" />このページの読み込み時間に影響を与えません。これは自動的にあなたも、あなたのイメージが応答するために、いくつかのCSSを使用して、（width:100%; height:auto）をご<body><img>の割合を継承させるだろうsrcが<img>で、background-imageのプロパティが<body>の場合、画像は1回だけダウンロードされます。
また、あなたは<img>その場で作成され、自動的に<body>に配置したい場合は、ここでbodyのbackground-image性質を解析し、あなたのため<img>を追加するための小さなスクリプトです：
$(window).on('load', function(){
var body = $('body'),
imagePath = body.css('background-image').replace('url("', '').replace('")',''),
img = $('<img />', {
class:'hidden',
src:imagePath
});
body.prepend(img);
})
background-imageは、<img>ではありません。画像にはvisibility:hiddenがあり、ブラウザでは表示されません。また、私は準備をしていますが、追加していません。 <body>の最初の子であれば、通常のコンテンツフローより下にレンダリングされます。追加された場合は、z-index: -1またはpointer-events: noneが必要になります。これにより、タッチイベントが実際のコンテンツに渡るようになります。
質問が分かりません。あなたは背景をスクロールできるようにしたいですか？ – jordaniac89