0

ボックス画像を含む div を html に追加しようとしています。しかし、画像をdivのサイズに引き伸ばすことができませんでした

ここに私がこれまでに持っているものがあります、

<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
    test 
</div>

これにより、幅 600px、高さ 400px の div が表示されますが、画像の半分が表示されます。しかし、画像を引き伸ばす必要があります。

ありがとう

4

2 に答える 2

3

background-size: cover;orを使用background-size: containします (必要に応じて適切なプロパティを選択してください)

MDNから

cover このキーワードは、背景画像の両方の寸法が対応する背景配置領域の寸法以上であることを保証しながら、背景画像をできるだけ小さくスケーリングする必要があることを指定します。

このキーワードは 、背景画像の両方の寸法が背景配置領域の対応する寸法以下であることを保証しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。

于 2013-07-22T08:39:53.640 に答える
2

画像を引き伸ばして元の縦横比を失わせたい場合は、 を追加しbackground-size: 100% 100%;ます。

一方、画像の縦横比を維持しながら div 全体を画像で占めたい場合、一部のクリッピングは問題ありません。 background-size: cover

于 2013-07-22T08:41:15.760 に答える