問題タブ [background-size]

フロントページにカスタムCSSを挿入できるWebアプリケーションに取り組んでいます。

スタートページにフルスクリーンの背景画像を表示したい。すべての最新バージョンのブラウザーでサポートされているbackground-size:coverを使用できることを理解しています。

これは、Firefox および Chrome の最新バージョンで機能します。ただし、IE11では機能しません。背景画像は画面全体を覆うように縮小されません。元のサイズで表示され、部分的にトリミングされています。

F12 を使用してデバッグすると、margin-top または margin-bottom (スクリーンショットを参照) を無効にすると、background-size プロパティが機能することがわかりました。

Web アプリケーションの元の CSS によって導入された margin プロパティを変更したくありません。この問題を解決する方法はありますか?

私は使用しています：

1pxただし、ブラウザーの右側に小さな線があり、それをカバーできないようです。Opera、FF Dev、Chrome で自分のサイトをローカルでテストしましたが、すべて同じ問題でした。

何か不足していますか？

• 右側は次のようになります (悪い): http://i.imgur.com/IO2oJkj.png
• 左側は次のようになります (良い): http://i.imgur.com/54EFfgI.png

基本的に、タイトルがすべてを物語っています。

基本的に、image1 はデフォルトのプロパティを典型的な背景として維持したいのですが、image2 は以下に相当するものに設定したいと考えています。background-size: cover;

私は、サムネイルとして背景画像を含むいくつかのボックスがあるサイトに取り組んでいます。私たちが取り組んでいる CMS はかなり古く、クライアントは変更されないため、background-image を使用する必要があります (mon€y が主な問題です)。

iPad2 および iPhone5 (最新の iOS) の iOS Safari で奇妙な動作が発生することがわかりましたが、その理由はわかりません。

これが私のコードです：

私のデスクトップでは画像全体が表示されますが、iOS ではサムネイル ボックス内に元のサイズが表示されているように見えます。どうすればこの問題を解決できますか?

どんな助けでも素晴らしいでしょう:)ありがとう

モエスフェミー

何時間も前から簡単な解決策を探していますが、見つかりません。私の問題: サイトがあり、background-size: cover を使用してヘッダー画像をフルサイズで表示します。すべてのブラウザで問題なく動作しますが、iOS デバイスではひどく見えます。例: http://www.dnu-films.ch/site/ 何かアイデアはありますか? どうもありがとう！

背景画像がホバー時にズームする、最近見た効果を達成しようとしています。私はここの例でほとんどそれをしました: https://jsfiddle.net/qyh6nbwt/しかし、それは非常に不安定なようです (あなたはそれの上にカーソルを置くことで私が意味することを理解するでしょう)、私は最新のクロムバージョンを実行している osx を使用しています。他のブラウザではまだチェックしていません。ズームイン時に「揺れ」ないようにスムーズにする方法はありますか？

HTML

CSS