为页面上的多个 div 容器调整 1 个背景图像的大小答案

【问题标题】：Resize 1 background image for multiple div containers on a page为页面上的多个 div 容器调整 1 个背景图像的大小
【发布时间】：2010-12-23 19:31:12
【问题描述】：

我有一张超级精美的背景图片，它需要缩放为一页上 3 个框的背景，高度/宽度为 100%。这可能吗？

NOT 1 背景缩放为整个页面背景。

但是

|框 1 (50x50) 获取背景| |框 2 (20x20) 获取背景 |等等

我想为所有这些 div 分配“背景”类，并使用 1 个根据 div 的尺寸缩放的背景图像。它是一个正方形，如果它看起来稍微有点扭曲就可以了

仅供参考 - 这是一个面板页面的 drupal 布局。

【问题讨论】：

【解决方案1】：

我不知道您的浏览器限制，但有一个名为 background-size 的 CSS3 属性。您只需将其设置为background-size: 100% 100%。

【讨论】：

【解决方案2】：

.background img {
    height: 100%;
    width: auto;
}

这将使图像拉伸以适应 div 的高度 @ 100% 高度并使用 width:auto 自然缩放。

【讨论】：