問題タブ [background-size]

background-sizeこのプロパティを全幅と高さの背景画像に使用していますが、Nexus7 タブレットの Chrome を縦向き表示で完全にカバーするのに問題があります。高さではなく幅のみをカバーします。つまり、その200px下に約空白があります。ただし、デスクトップ Chrome (またはその他のもの) でサイトを表示し、垂直モニターで縦長のサイズをエミュレートしても問題はありません。

誰にも解決策がありますか？

CSS:

縦向きのスクリーンショット:

ボックス内の画像のサイズと位置を変更して、ボックス全体を覆うようにするにはどうすればよいですかbackground-size: cover?

overflow:hiddenボックスに追加する必要があり、画像が必要であることはわかっていますposition: absolute。しかし、画像の適切な新しいサイズ、および左 + 上の位置を取得する式は何ですか?

背景画像を含む図のリストがあります。次のようなもの：

これらの各イメージには、と にbackground-size設定されています。coverbackground-attachmentfixed

各図がビューポート全体を占める場合、これはうまく機能しますが、何らかのオフセットがある場合、背景画像が切り取られます。

私が知る限り、これは設計によるものです ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values )。

画像を垂直または水平のいずれかで切り取って、両方ではなく、図自体のサイズで中央に配置したいと思います。

JavaScript ソリューションがあることは知っていますが、CSS を使用してこれを行う方法はありますか?

これが実際の例です: http://codepen.io/Godwin/pen/KepiJ

このコードの何が問題になっていますか? Internet Explorer 10 または 11 では、ズーム トランジション効果は機能しません (他のブラウザーでは問題ありません)。

ここで見るように、background-size トランジションは IE10/11 で動作するはず
です。私の間違いはどこですか?
ここでコードペンを作りました

背景画像を設定した div があります。

次の CSS を使用します。

背景サイズは、Firefox、Safari、および Chrome で考慮されます。IE8 では、SVG は PNG ファイルに置き換えられます。ただし、IE9 および IE10 では、SVG ファイルのサイズが大幅に縮小されています。問題は、div の幅と高さに関連しているようです。150px の高さを追加すると、SVG は適切にレンダリングされます。小さくすると (つまり 100px)、グラフィックが縮小し始めます。

エクスプローラーでこの問題を解決する方法を見つけた人はいますか? div の幅と高さとは無関係に background-size 値を使用するように IE に指示する方法はありますか?

IE で background-size に問題があったため、IE で動作させる JavaScript を見つけましたが、画面の幅が 768 ピクセルを下回る場合にのみ background-size を適用したいと考えています。

これが私の現在のスクリプトです：

これはサイズ変更を開始すると機能しますが、768 を下回ると background-size は削除されず、初期状態には背景サイズもありません。何か案は？ありがとう！

背景のグラデーションを使用して、レスポンシブな円形 div (% 幅、0 高さ、% padding-bottom および 50% 境界半径を使用して作成) があります。背景サイズを変更すると、webkit / Firefox で一致しない

background-size 100% / auto を使用すると、両方とも期待どおりに一致します。

しかし、背景サイズを他のサイズに設定すると、それらは異なります（画像に表示されている自動200％）。Safari と Chrome では期待どおりに画像が表示されますが、Firefox では表示されません。ウェブキット: Firefox:

background-size を auto 300% に設定すると、Firefox では正しく表示されますが、webkit では大きすぎます。-moz-background-size を使用して Firefox を別の設定にすると、新しいバージョンでは代わりに background-size が使用されます。-webkit-background-size を使用して Webkit を小さいバージョンに設定すると、background-size プロパティによっても上書きされます

スタイル:

私はCode.tutsplus の Parallax チュートリアルに従いましたが、これに似たものもいくつか見ました。ただし、要素の上部または下部に空白スペースが常に作成されるため、何らかの理由で完全に機能するチュートリアルはありません。

そこで、要素の高さと視差効果の速度に基づいて、要素の 'background-size' プロパティも取得するようにコードを変更することにしました。しかし、それでも正しく機能せず、下部に空白スペースが作成されます。

私のコードをチェックして、何が間違っているのか教えてください:

また、ここにcssがあります：

私がここで間違っていることを教えてください。ありがとう

良い一日を。サイズが に設定された背景画像を持つ div がありcoverます。

javascriptまたはjqueryで背景サイズを取得するにはどうすればよいですか?

つまり、背景は div をその寸法、幅または高さのいずれかで埋めます。表示部分だけでなく、完全な (計算された) 画像の幅と高さを理解したいと思います。

wwindow のサイズを変更すると、背景が div 全体をカバーしていることがわかります。もちろん、「カバー」が div の幅または高さを埋めるため、一部の部分は表示されません...サイズ変更ごとに、これは画像全体の寸法 (見える部分と見えない部分) ?