CSS：如何将容器大小设置为背景图片大小

Question

我知道如何用background-size属性拉伸背景图片以适应容器大小。但是如何在不手动设置宽度和高度的情况下实现相反的效果呢？

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

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

1. 在Photoshop中更改图像（可能会得到略微不同的图像尺寸） 2. 记住新的尺寸 3. 进入CSS文件查找使用该图像作为背景的特定元素 4. 更改元素的宽度和高度（如果我还记得它们的话...）

- Philip007

Answer 1

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

基本上是一种hack方法，但我认为它会产生您想要的效果。

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

- thgaskell

---

这是一个非常简洁的解决方案。 - Philip007

Answer 2

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

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

- cimmanon

---

很棒的解决方案。我会在我的下一个项目中尝试使用Compass。 - Philip007

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

- jpmorin

---

哦，我误读了你的问题...你想根据背景图片的大小设置容器的大小...除非你在JavaScript中加载图像，否则我不确定你如何做到这一点。 - jpmorin