Question

我知道如何拉伸背景图像以适合其容器（具有background-size属性）。但如何在不手动设置宽度和高度的情况下实现相反的方式呢？

为了更好地说明我的观点，假设我们有一个带有一行文本的p元素，并将其背景图像设置为800 * 600px的图片。如何自动将p 的宽度和高度调整为800 * 600？

我问这个问题，因为我正在寻找更好的工作流程。每次我在Photoshop中更改图像大小时，在CSS中更改宽度和高度都非常烦人。工作流程如下：

在Photoshop中更改图像（可能最终图像尺寸略有不同）
记住新维度
进入CSS文件，查找将该图像用作bg
更改元素的宽度和高度（如果我还能正确记住它们的话......）

Answer 1

您可以使用img元素并将包含div的显示设置为inline-block，而不是使用背景图像。然后，您需要创建一个内部div来包装内容并将其相对于包含div进行绝对定位。由于img是流程中的唯一内容，因此包含div将相对于图像调整大小。

几乎是一个黑客，但我认为它会产生你想要的效果。

http://jsfiddle.net/Km3Fc/

<强> HTML

<div class="wrap">
    <img src="yourImg.jpg" />
    <div class="content">
        <!-- Your content here -->
    </div>
</div>

<强> CSS

.wrap {
    display: inline-block;
    position: relative;
}

.wrap img + .content {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

您唯一的选择是以编程方式添加高度/宽度。 Compass for Sass具有可在编译CSS文件时返回图像尺寸的函数：http://compass-style.org/reference/compass/helpers/image-dimensions/

.foo {
    height: image-height('my-img.png');
    width: image-width('my-img.png');
}

Answer 3

根据CSS3 w3schools的文档，这应该这样做：

div {
    background-size: contain; /* or cover */
}

编辑：使用javascript，您可以从background-image属性加载图片并设置容器的大小。

(function() {
    var img = new Image();
    var $mydiv = $('#mydiv');
    img.src = $mydiv.css('background-image').slice(4,-1);

    $mydiv.width(img.width).height(img.height);
})();

CSS：如何设置容器大小等于背景图像大小

3 个答案: