Question

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

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

<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>

Answer 1

Jeepstone是对的，它受CSS 3支持并且除了IE（欢乐）之外的大多数浏览器都支持但是我不确定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;
}

Answer 2

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

调整div的背景图像

2 个答案: