将 div 元素的大小调整为其背景图片的尺寸

Question

是否可能使一个 <div> 根据其背景图片自适应？我的意思是保持宽度和高度的比例。

澄清：

• div 改变了宽度。（这是响应式设计）

• 我不是指让背景适应 div。这可以使用 background-size 实现。但我想问的是相反的方式：将图像放在背景中，并使父 div 适应该图像的大小，无论其大小如何。

• 我知道如果将图像放在 HTML 中而不是背景中，我可以做类似的事情。但在这种情况下，我无法根据不同设备大小更改图像。因此，我要求将图像放在背景中以便能够使用 CSS 更改它。

在我提供的示例中，我可以使图像适应宽度，但高度会留下空白。我能否使 div 也适应图像的高度，因为图像改变大小？换句话说，在响应式环境中，一个具有背景图像的 div 是否可以在改变大小时不留下空白？

这是例子的演示。

CSS：

#image {
    margin:0px auto; 
    width:90%;
    max-width:512px;
    height:512px; /* I need to give heigt to make it visible? */

    background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:yellow;/*just to make visible the gap in the height*/
}

HTML：

<div id="image"></div>

- Nrc

---

是的，你必须使用高度来使其可见，否则就没有内容可以显示，因此div会折叠。 - kumarharsh

Answer 1

不可能使一个 div 与其背景图像相适应，因为这是“无意义的”。

原因在于：

一个 div 的大小由其“内容”决定，或者如果其尺寸被明确设置。由于背景图像不属于这些类别之一，因此您可以看到这是不可能的。

您可以做的是：

HTML

<div class="image-controlled">
  <img>...</img>
  <div class="content">...</div>
</div>

CSS

 .image-controlled {
   position: relative; 
   overflow: hidden <-- optional, if you want to cut off .content which overflows the image boundaries
 }
 .content {
   position: absolute;
   top: 0; left: 0; <-- position of the content as it should be (normally)
 }

现在div的大小将与图像相同，并且.content将被显示在其上。

---

还要注意，.content div可以出现在<img>之上或之下，但效果是相同的。但是，如果您也在img元素上应用了position属性，则需要将.content的z-index设置为大于<img>的值。

- kumarharsh

Answer 2

通过使用CSS，无法根据背景图像大小更改元素的尺寸。要实现这一点，应该使用JavaScript：

HTML：

<div id="image"></div>

JavaScript:

var 
    img = document.getElementById('image'),
    style = img.currentStyle || window.getComputedStyle(img, false),
    imgSrc = style.backgroundImage.slice(4, -1),
    image = new Image();

image.src = imgSrc;
img.style.width = image.width + 'px';
img.style.height = image.height + 'px';

JSFiddle演示

---

更新: jQuery版本

这是jQuery版本。

var
    img = $('#image'),
    imgSrc = img.css('background-image').slice(4, -1);

$('<img />')
    .attr('src', imgSrc)
    .on('load', function() {
        img.width(this.width);
        img.height(this.height);
    });

JSFiddle演示 #2

- Hashem Qolami

---

抱歉，我对纯JavaScript不够熟练。我更习惯于使用jQuery。因此，我无法欣赏您的代码，也无法将其应用于我的情况。 - Nrc

@Nrc 我已经添加了jQuery版本和演示。 - Hashem Qolami

在上面的例子中，我们动态创建了一个img元素，设置了src属性，加载图像后获取其尺寸，并更改我们的#image部分的width和height。 - Hashem Qolami

Answer 3

可以的。我们可以使背景图片适应其div，使其也具有响应性。

响应式背景图片的技巧： background-size:cover
-将背景图像设置为背景大小覆盖
-在css中将填充设置为百分比，上下都是
-使背景图片不重复

参见此链接：https://jsfiddle.net/beljems/dtxLjmdv/

- bellabelle

---

有趣的解决方案。你是如何计算上下内边距的？ - Nrc

背景附着：覆盖我认为不存在。我想你的意思是背景大小：覆盖； - Nrc

你需要进行一些调整，直到与图像大小相同，使顶部和底部相同，并确保单位为百分比。 - bellabelle

Answer 4

也许可以使用JavaScript获取图像的URL：

var img = document.getElementById('image').style.backgroundImage; 
var width = img.clientWidth;
var height = img.clientHeight;
document.getElemetById('image').style.width = width;
document.getElemetById('image').style.height = height;

我强烈怀疑你不能仅通过样式表来完成这个任务。

- gen

---

你能用jQuery来完成这个吗？我觉得我会更好地理解。 - Nrc

我不是很擅长于jQuery，但它肯定与此非常相似。你需要写的是$('image')，而不是getElementById，然后使用js获取图像的尺寸，同时将最佳的样式参数设置为你刚刚获取的变量。 - gen

Answer 5

好的，我的解决方案有点棘手，但它有效。它是JavaScript，并且涉及到你想要的jQuery。思路是创建一个新图片，将其添加到DOM中，等待其加载并获取其尺寸。然后删除新图像，并将宽度和高度应用于原始img标记。这里是一个演示解决方法的jsfiddle http://jsfiddle.net/krasimir/bH5JZ/5/

这是代码：

$(document).ready(function() {
    var image = $("#image");
    var imageurl = image.css("background-image").replace(/url/, '').replace(/\(/, '').replace(/\)/, '');
    var body = $("body");

    var newimage = $('<img src="' + imageurl + '" />');
    newimage.css("display", "none");
    body.append(newimage);
    newimage.on("load", function() {
        var w = $(this).width();
        var h = $(this).height();
        image.css("width", w);
        image.css("height", h);
        newimage.remove();
    });
});

还有CSS：

#image {
    margin: 0px auto;
    background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:yellow;
}

- Krasimir

Answer 6

最简单的方法，不需要任何JavaScript，就是将您的图像设置为背景图像，然后制作一个与您在该div中设置的大小相同的.gif或.png作为叠加图像。透明的.png或.gif将调整div的大小。透明的.png或.gif只有几KB，您的页面加载速度比使用JavaScript更快。

<!DOCTYPE html>
<html>
    <head>
    <style>
    div {
        background-image:url("myImage.jpg");
        background-size:100% auto;
        }
    </style>
    </head>
    <body>
        <div><img alt="" src="myOverlay.png"></div>
    </body>
</html>

- Kobbe