Question

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

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

如果可以的话，可以将background属性的高度和宽度扩展为与它所属的选择器相同的渲染，就像更改<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>

关于这是否可行的任何答案，以及相对有效的方法，将非常感谢;）。

我更愿意在客户端做到这一点，然后找到一个图像re-sizer类，在本地下载图像，然后使用该类重新调整它的大小。

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

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

1 个答案: