19

内部に動的に配置されるテキストの量に基づいて、高さが拡大/縮小するコンテナがあります。コンテナには背景画像があり、コンテナの高さが変わると伸縮する必要があり、この画像をトリミングすることはできません。.containerbackground-image を div の 100% のままにするにはどうすればよいのでしょうか。

次のことを試しましたが、うまくいかないようです。

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }

HTML 構造のサンプル:

<div class="container">
  <p class="text">This is a short container</p>
</div>

<div class="container">
  <p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>
4

4 に答える 4

44

プロパティを設定する必要がありbackground-sizeます。 background-size: 100% 100%;コンテナを水平方向と垂直方向の両方で満たすようにスケーリングします。

私は通常background-size: cover;、縦横比を維持しながら、必要に応じて画像を優雅に拡大することを好みます。これはかなり新しいプロパティであるため、background-sizeのサポートを必ず確認してください。

于 2012-11-23T19:40:36.753 に答える
4

Did you try background-size: cover; ?

In your example you're adjusting background-position.

于 2012-11-23T19:40:05.873 に答える
3

css3 には background-size:cover; というプロパティがあります。および background-size:contain;。用途に合わせて使い分けるといいかもしれませんbackground-size:cover;。

**contain

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



cover

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

**

于 2012-11-23T19:46:21.330 に答える