CSS：如何设置容器大小等于背景图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15961824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to set container size equal to background image size
提问by Philip007
I know how to stretch background image to fit its container (with background-sizeproperty). But how to achieve the other way around without setting width and height manually?
我知道如何拉伸背景图像以适合其容器（带background-size属性）。但是如何在不手动设置宽度和高度的情况下实现相反的目标？
To better make my point, assume we have a pelement with one line of text and set its background-image to an picture of 800*600px. How to adjust the width and height of pautomaticallyto 800*600?
为了更好地说明我的观点，假设我们有一个p包含一行文本的元素，并将其背景图像设置为 800*600 像素的图片。如何p自动调整宽度和高度为800*600？
I ask the question because I am looking for a better workflow. It's quite annoying to change width and height in CSS every time I change the image size in Photoshop. The workflow is like below:
我问这个问题是因为我正在寻找更好的工作流程。每次在 Photoshop 中更改图像大小时，在 CSS 中更改宽度和高度都非常烦人。工作流程如下：
- Change image in Photoshop (likely end up with a slightly different image dimension)
- Remember that new dimension
- Go into CSS file looking for that particular element which uses that image as bg
- Change width and height of the element (if i still remember them correctly..)
- 在 Photoshop 中更改图像（最终图像尺寸可能略有不同）
- 记住那个新维度
- 进入 CSS 文件，寻找使用该图像作为 bg 的特定元素
- 更改元素的宽度和高度（如果我还没有记错的话..）
采纳答案by thgaskell
Instead of using a background image, you could use a imgelement and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the imgis the only thing in the flow, the containing div will resize relative to the image.
您可以使用img元素并将包含 div 的显示设置为，而不是使用背景图像inline-block。然后，您需要创建一个内部 div 来包装内容并将其绝对相对于包含的 div 定位。由于img是流程中唯一的内容，因此包含的 div 将相对于图像调整大小。
Pretty much a hack, but I think it would give the effect you are looking for.
几乎是一个黑客，但我认为它会给你正在寻找的效果。
HTML
HTML
<div class="wrap">
<img src="yourImg.jpg" />
<div class="content">
<!-- Your content here -->
</div>
</div>
CSS
CSS
.wrap {
display: inline-block;
position: relative;
}
.wrap img + .content {
position: absolute;
top: 0;
left: 0;
}
回答by cimmanon
Your only option would be to programatically add the height/width. Compass for Sass has functions that can return the dimensions of the image when the CSS file is compiled: http://compass-style.org/reference/compass/helpers/image-dimensions/
您唯一的选择是以编程方式添加高度/宽度。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');
}
回答by jpmorin
According to the documentation for CSS3 w3schoolsthis should do it:
根据 CSS3 w3schools的文档，这应该这样做：
div {
background-size: contain; /* or cover */
}
EDIT:using javascript, you could load the image from the background-image property and set the size of the container.
编辑：使用 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);
})();
