問題タブ [background-size]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - IE11 は背景サイズをサポートしていません
子 DIV (リンクホルダー) の数に関係なく、バックグラウンド .jpeg の図を DIV (ラインホルダー) の高さに合わせて自動スケーリングしようとしています。
コードは Chrome と Firefox で 100% 機能しますが、IE11 は background-size を完全に無視します。
私の HTML マークアップは次のようになります。
CSS:
IE11 は、ラインホルダーの左上隅に元の背景画像を表示するだけですが、他のすべてのブラウザーは DIV に合わせて高さを拡大します。
こちらの写真をご覧くださいhttp://6710.sunnysite.dk/background-size_debug.jpg
背景画像 css は、html 内にあります。これは、HTML CSS の知識がまったくない人が、異なる背景画像を持つ個々のラインホルダーを挿入する必要があるためです ;) したがって、異なるクラスなどはオプションではありません。
css - CSS: レスポンシブ ナビゲーション バーの背景画像リンクをレスポンシブおよびスケールにする
クライアントのパララックス WordPress サイトで作業しており、各リンクの背景画像にスプライトが使用されているナビゲーション バーがあります。ここで 7 つのリンクのナビゲーション バーを確認できます ( http://www.aishla.com/blog/2014/my-aish-test/ )。デスクトップでは見栄えがよくなりましたが、これらの画像をレスポンシブにしたいと考えています。つまり、デザインが小さくなるほど小さくなります。
そのため、CSS で background-size 設定を使用できると考えましたが、メディア クエリで試してみると、必要な画像の一部ではなく、a href 内のスプライト全体が取得されます。だから、これがこの方法で達成できるのか、それともさまざまな画面解像度用の一連のスプライトを作成するのに行き詰まっているのか疑問に思っています。これを機能させるために私が使用しているものの例を次に示します。
まず、デスクトップ版から:
最大幅 768px のメディア クエリ:
html - CSS の background-size プロパティ
Web サイトにフルサイズの背景を追加したいのですが、できれば CSS プロパティbackgroundとbackground-size. 現在、私は以下を使用しています
そして、それ<body class="bg">を適用します。問題は、ウィンドウが非常に狭くなった場合、私が使用している風景スタイルの背景画像は、幅の 100% にスケーリングされるため、小さな部分しかカバーしないことです。白い背景を残さないように、幅100%または高さ100%のいずれかを使用する方法はありますか? これに関するいくつかのガイドを見つけましたが、それらはすべてかなり「醜い」コードを含んでいます。
おまけのリクエスト: できれば IE9 などの古いブラウザをサポートするコードを使用してください
html - ビデオの幅が正しくスケーリングされない
少し問題があります。ブラウザに合わせて調整したいビデオがあります。伸縮するべきではありませんが、スペースが表示されているべきではありません
HTML:
CSS:
background-size: cover;ビデオが中心からずれてしまうという問題を引き起こしています。ブラウザの幅と高さ全体をカバーする別の方法はありますか? ビデオが正しくスケーリングされていても、画像の左右に白いバーが残るため、現時点width: 100%では問題を完全には修正していません。height: 100%この問題を解決する方法はありますか?
css - 背景をそのままにしておくことができません
だから私が望むのは、背景画像をそのままにして（コンテンツの量に応じてサイズを変更しないで）、左の列をスクロールして（可能であれば！）右の列をそのままにしておくことです。
internet-explorer-8 - IE8の背景サイズのピクセルポリフィル?
CSS3 の background-size を IE8 で正しく動作させる必要があります。そこには多くのJavaScriptライブラリがありますが、それらはpx値ではなくオプション「カバー」と「含む」を拡張しています。画像スプライトを使用しているため、背景サイズをピクセル単位で設定する必要があります。
これが私のコードのデモです。スプライト画像は 600px 400px ですが、背景サイズを 300px x 200px に設定して、高密度ディスプレイで鮮明に見えるようにしました。
http://jsfiddle.net/rr2obdss/4/
2 番目の画像スプライトを作成して維持することなく、サポートを IE8 に拡張できますか?