Html CSS背景图像不'；与选择器的高度/宽度不匹配？

我有一堆非本地图像，我想把它们作为宽度为

500px

和高度为

330px

的类的背景图像渲染。尽管这些是在类的CSS属性中指定的，但是

background:url（'http://www.example.com/image.jpg');不会缩放以适应此大小，而是保留其原始远程高度

也许我完全错误地认为remote/local与此问题有关，并且默认情况下背景图像不具有选择器的宽度或高度，这是它的属性

如果是这样，是否可以扩展背景属性的高度和宽度，以便在与其所属的选择器相同的位置进行渲染，就像更改
标记上的高度/宽度属性将如何影响远程文件一样

以下是相关的CSS+HTML标记：

#sub_section_1 {
    width: 100%; height: 350px;
    margin-bottom: 20px;
}

#sub_section_1 .text {
    float: left;
    width: 240px; height: 100%;
}

#sub_section_1 .image {
    float: left;
    background: url(../images/sub_image.png) no-repeat;
    width: 500px; height: 330px;
    padding: 10px; margin-right: 10px;
}

.overlay {
    padding: 20px 20px;
    background: url(../images/desc_overlay.png) repeat-x;
    height: 60px; width: 460px;
}


<div id="sub_section_1">
<div class="image">
<div class="acc_image_2"><div class="overlay"><h2>Rabatt <?php echo $deal2['savings']; ?>% /Dein Preis - <?php echo $deal2['price']; ?>CHF</h2></div></div>
</div>
<div class="text">
<h2><?php echo $deal2['title']; ?></h2>
<p><?php echo $deal2['description']; ?></p>
<div class="button" align="center"><a href="<?php echo $deal2['link']; ?>">Purchase Deal</a></div>
</div>

#第1小节{
宽度：100%；高度：350px；
边缘底部：20px；
}
#第1分节正文{
浮动：左；
宽度：240px；高度：100%；
}
#第1小节图像{
浮动：左；
背景：url（../images/sub_image.png）不重复；
宽度：500px；高度：330px；
填充：10px；右边距：10px；
}
.覆盖{
填充：20px 20px；
背景：url（../images/desc_overlay.png）repeat-x；
高度：60像素；宽度：460像素；
}
拉巴特%/Dein Preis-瑞士法郎


如果您能回答这是否可行，并能以相对有效的方式做到这一点，我们将不胜感激；）

我更希望能够在客户端执行此操作，然后找到一个图像大小调整器类，在本地下载图像，然后使用该类重新调整图像大小。
这取决于您期望的兼容性。CSS3提供了背景大小，但在较旧的浏览器（IE8及更低版本）中不支持。你可以用Modernizer来做这些。或者你可以用老式的方式，在div里放一个图像

<div id="container">
   <div id="background"><img src="...."></div>
   <div id="content">
      Content here
   </div>
</div>

签出CSS3背景大小属性。我决定使用服务器端大小调整，因为它更适合我的整个模式，老实说，在查看之后。但是感谢上面的建议，我确实试过了；但不到五分钟，他就意识到这不是最有效的行动。
#container {  position : relative; }
#background {  position : absolute;
               width : 100%;
               height : 100%;
               z-index : 12;
               top : 0;
               left : 0; }
#background img {   width : 100%;
                   height : 100%; }
#content {  position : absolute;
               z-index : 13;
               top : 0;
               left : 0; }