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

Question

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

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

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

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

score 7 · Accepted Answer

您可以使用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;
}

score 5 · Accepted Answer

您唯一的选择是以编程方式添加高度/宽度。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');
}

score 2 · Accepted Answer

根据 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 - CSS：如何设置容器大小等于背景图像大小

3 回答 3

Related

Reference