调整div的背景图片大小答案

【问题标题】：resize background image of div调整div的背景图片大小
【发布时间】：2011-03-18 17:28:26
【问题描述】：

使用 joomla 组件从数据库中提取图像以进行幻灯片放映。

它将图像设置为 div 的背景 - 我需要将该图像的大小调整为幻灯片的宽度（620 像素）。

<div style="background: url({image1url}) top center no-repeat;
 width:620px;
 height:350px">
<div style="width:620px;
     height:256px;">
<a href="{url}">
    <img src="modules/mod_jxtc_ezrealtywall/images/10x10spacer.gif" width="620" height="246" alt="10x10spacer.gif" /></a>
</div>
<div style="position:relative; width:620px;
     height:104px;">

    <div style="position:absolute; width:620px; height:95px; background:#000; opacity:0.7; filter:alpha(opacity=70); "></div>

    <div style="position:absolute;">
        <div style="float:left;
             width:250px;
             border-right: 1px dotted #cccccc;
             color:#ebebeb;
             padding-right:30px;
             padding-left:20px;
             text-align:right;
             font-size:28px;
             letter-spacing:-1px;
             line-height:28px !important;
             margin-top:16px;
             font-weight:500;">
            {unitnum} {streetnum} {address} {locality} {postcode}
        </div>
        <div style="float:right;
             width:250px;
             color:#ebebeb;
             margin:23px 40px 5px 0px;
             padding-left:15px;
             text-align:left;
             font-size:11px;
             line-height:11px !important;">
            {description}
        </div>
    </div>
</div>

【问题讨论】：

那么你的问题是什么？
这应该设置你的图像大小跨度>
宽度 x 高度不适用于 CSS bg 图片，Martin。

标签： image html joomla resize background

【解决方案1】：

您无法使用 CSS 调整背景图片的大小（除非您使用的 CSS 3 尚未完全实现）。

【讨论】：

【解决方案2】：

Jeepstone 是对的，它受 CSS 3 支持，并且除了 IE (joy) 之外的大多数浏览器都支持，但我不确定 IE9？有关更多信息，请参阅http://www.css3.info/preview/background-size/，下面是一个示例 - 在这种情况下，通过使背景图像居中，我得到了一个调整大小的背景图像，而 IE 用户得到了一个裁剪的图像，这有时就足够了......也许......

.backgroundImage {
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -khtml-background-size : 100% 100%;
    -moz-background-size: 100% 100%;
    background-position: center center;
}

【讨论】：