要素を作成し、そのプロパティを100% autodivに変更しようとしましたが、うまくいきませんでした (現在 chrome 47 を使用しています)。なぜ私はこれを行うことができないのですか？どうすれば修正できますか？background-size

フィドル

上記のコード例は、2 つの要素の background-size プロパティを と に変更auto 100%し100% autoます。私のコードが印刷されます

元の画像 (2880 x 900) は次のとおりです。

レンダリングされたページ (1280 x 500) での表示方法は次のとおりです。

1280 x 500 は、<div>背景として画像を含む の寸法です。お気づきのように、レンダリングされた背景は、元の画像よりも小さい div 内に収まるように縮小するのではなく、切り取られています。私の理解では、 abackground-size: coverはトリミングせずに画像を拡大または縮小するためのものです。なぜ機能しないのですか？

HTML

CSS

別のページのまったく同じマークアップは問題なく機能します。2 つのページには、スニペットに使用されているタグがまったく同じです。この問題を CSS で解決する方法はありませんか? もしそうなら、どうすれば JS を使用してそれを行うことができますか (可能であれば、それを避けたいと思います)。

したがって、次のようなcssコードがあります。

最初の画像（silverleaf.png）についてbackground-size、ピクセル（silverleafの場合）またはauto. タグで試してみましbackground-sizeたが、上記で定義したすべての背景のサイズが変更されます。

背景画像の位置 (中央中央) と背景サイズ (カバー) の CSS コードを短縮するのに苦労しています。

次のコードを使用するときはいつでも、明らかに正常に動作します。

HTML:

CSS:

センター センターとカバー プロパティの複数の CSS 繰り返しを短縮/削除したい (複数のバナー ID がありますが、背景設定が繰り返されているため)、次のコードはセンター センターと画像を正しくカバーしません。

HTML:

CSS:

私は何を間違っていますか？