html - CSS 背景图像与选择器的高度/宽度不匹配？

Question

我有一大堆非本地镜像，我想将它们渲染为宽度为 500px 的类的背景图像。和高度 330px .尽管这些是在类的 CSS 属性中指定的，background: url('http://www.example.com/image.jpg');不会缩放以适应此大小，而是保留其原始的远程高度。

也许我完全错误地认为远程/本地与此问题有任何关系，并且默认情况下背景图像不采用选择器的宽度或高度，这是它的属性？

如果是这样，是否可以扩展背景属性的高度和宽度以与其所属的选择器相同地呈现，就像如何更改 <img> 上的高度/宽度属性一样标签甚至会影响远程文件？

这是相关的 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>

任何关于这是否可能的答案，以及一种相对有效的方法，将不胜感激；)。

我宁愿能够在客户端执行此操作，然后找到一个图像调整器类，将图像下载到本地，然后使用该类调整它的大小。

Answer 1

这取决于您期望的兼容性。 CSS3 提供背景大小，但在旧版浏览器(IE8 及更低版本)中不受支持。你可以为那些使用 modernizr。或者你可以用老派的方式来做，在 div 中放一张图片

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

和 CSS

#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; }