問題タブ [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 - background-size-polyfill は IE8 では機能しませんか?
私はこの簡単なコードを持っています:
ページの読み込み時にエラーは発生しません。しかし、バックグラウンドはこれがない場合と同じように機能します。
.htaccessbackgroundsize.htchtmlページと同じフォルダーにあります。HTMLページをダブルクリックして、このファイルをローカルで実行します。
PolyFillを参照として使用しています
css - サイズトランジションなしの背景サイズのカバーフェードトランジション
背景を変更する div があります (jQuery を使用)。これらの CSS3 ルールにより、新しい背景画像を適切にクロスフェードさせることができます
問題は、背景のサイズも移行していることです。
そのため、たとえばフェード中にポートレートからランドスケープの背景画像に切り替わると、画像は垂直方向に押しつぶされてから水平方向に引き伸ばされます。これは少し吐き気を催す可能性があります。
background-size: cover背景サイズなしで背景画像自体をフェードトランジションするだけで使用する方法はありますか?
css - CSS で作成された縞模様の背景は、IE の background-size に依存します
background-sizeCSS で作成された縞模様のグラデーションをいじっていると、プロパティの高さの値を減らすと縞模様が見えなくなるという IE の奇妙な動作が見つかりました。
この動作は IE でのみ: Chrome と Firefox は期待どおりに動作します。
コードは次のとおりです。
HTML
CSS
デモは次のとおりです。 http://jsbin.com/jipehipobele/1/edit
なぜこれが起こるのか、可能であればそれを回避する方法を誰かが説明してもらえますか?
html - background-size: カバーは幅にのみ適合します
背景として「水平」画像があります（2048x1148です）。
私は設定background:url("") no-repeat scroll center top / coverし、デスクトップモードではすべて問題ありません。モバイルでは、背景画像をスケーリングして自動的に高さをカバーすることはできません。background-size:cover自動的に行うべきではありませんか？
ライブサイトはこちら。
css - background-size:contain と :cover を組み合わせる方法はありますか?
background-size:containとbackground-size:coverを同時に使いたい。画像の縮尺を維持しながら、背景画像を常にブラウザ ウィンドウの幅 100% x 高さ 100% に引き延ばしたいと考えています。
これを達成するための純粋なcssルートはありますか?
これが私のコードです：
css - より大きなデバイスの背景画像に「最大幅」を設定します
背景画像を div に設定しましたが、幅が 1600px を超えないようにします。たとえば、幅が 1600px を超えるデバイスに表示される場合、背景画像が幅全体を覆うことは望ましくありません。これを達成する方法はありますか？
これは私が現在持っているものです。デバイスの幅に関係なく、画像は幅全体をカバーします。幅1600pxで止める必要があります。
css - すべての画面サイズで適切な比率で表示するには、空の div の背景画像が必要です
最初は再生ボタンのみを含むセクションがあり、クリックするとビデオ ギャラリーが表示されます。backgroundこのセクションには、セクション自体に含めることにした画像も含める必要があります ( #intro)。
問題は、再生ボタン以外にセクションに何もないため、背景画像全体を表示するのに十分なほど背景が垂直方向に引き伸ばされていないことでした。padding-bottom57.201%を含めることでこれを改善しました。最初は修正されましたが、再生ボタンを中央に配置する必要があり、マージンとパディングを使用してそれを実行しようとすると、パーセンテージのためにブラウザのサイズを変更した後、画像の下部に大きなギャップが表示されて混乱しました。に設定しpadding-bottomます。
そのため、応答性を高める必要があり、小さな画面のデバイスのユーザーに対応するために、いくつかのブレークポイントも設定したいと考えています。
これは、より良いアイデアを提供するためのスクリーンショットです。中央の再生ボタンをクリックすると、ビデオ ギャラリー ( #feat-video) が白い輪郭の長方形内にポップアップするはずです。
HTML
CSS
css - body要素で、ページの上部に画像を添付します。imgのスクロールはありません
次の問題があります。手っ取り早い方法はあると思いますが、今のところ解決方法がわかりません。
だから、私は画像を持っていて、要素のページの上部にのみ背景画像として表示したいのです。<body>現在、下にスクロールするとページの一番下に移動しています。
私は次のコードを持っています:
css - background-attachment: Safari で動作しない問題を修正
ブラウザーの 100% にまたがる要素で次のコードを実行しています。
私がする必要があるのは、画像をブラウザの幅全体に広げ、固定したままにすることです (これにより、コンテンツがその上にスクロールできるようになります)。
Safari を除くすべてのブラウザで動作するようです。
要素の高さと最小高さを100%に設定しようとしましたが、喜びはありませんでした。
デモ ページへのリンクは次のとおりです。 http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/