将 div 元素调整为其背景图像大小答案

【问题标题】：Resize a div element to its background image size将 div 元素调整为其背景图像大小
【发布时间】：2017-08-12 21:16:15
【问题描述】：

是否可以使<div> 适应其背景图像？我的意思是保持宽度和高度的比例。

澄清：

div 改变宽度。（这是一种响应式设计）
我不是说让背景适应div。 background-size 可以做到这一点。但我要问的是解决方法：在背景中有一张图片，让 div 父级适应该图片，无论其大小是多少。
我知道如果我将图像放在 html 中而不是在背景中，我可以做类似的事情。但在这种情况下，我无法更改不同设备尺寸的图像。所以我要求将图像放在背景中以便能够使用 CSS 更改它。

在我给出的示例中，我可以使图像适应宽度，但与高度存在差距。当图像改变它的大小时，我可以让 div 也适应图像的高度吗？换个方式问：在响应式环境中，带图片背景的div能否在不留空白的情况下改变大小？

这里是the example 玩。

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>

【问题讨论】：

是的，你必须使用高度让它可见，否则将没有内容显示，所以 div 会折叠。

标签： html css background

【解决方案1】：

不，不可能使 div 适应它的背景图像。

因为它是“无意义的”

是这样的：

一个 div 的大小是由它的“内容”决定的，或者它的尺寸是专门设置的。由于 background-image 不属于这些类别中的任何一个，您可以看到这是不可能的。

你可以这样做：

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> 的<img>

【讨论】：

【解决方案2】：

通过使用 CSS，无法根据 background-image 的大小更改元素的尺寸，要实现这一点，您应该使用 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 Demo

更新：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 Demo #2

【讨论】：

对不起，我对纯 Javascript 不够好。我更习惯 jQuery。所以我无法欣赏您的代码，也无法将其应用于我的案例
@Nrc 我已经添加了 jQuery 版本和演示。
在上面的例子中，我们动态创建了一个img 元素，设置src 属性并在加载图像后，获取它的尺寸并更改我们的width 和height师#image.

【解决方案3】：

是的。我们可以让背景图片适应它的 div，比如让它也有响应。

响应式背景图片的提示： background-size:cover
-将背景图片设置为背景大小的封面
-在 css 中将填充设置为顶部和底部的百分比
-使背景图像不再重复

查看此链接：https://jsfiddle.net/beljems/dtxLjmdv/

【讨论】：

有趣的解决方案。你如何计算填充顶部和底部？
背景附件：封面我认为不存在。我想你的意思是 background-size:cover;
你必须稍微调整一下，直到与图像大小相同，使顶部和底部相同，并确保单位是百分比。

【解决方案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;

我强烈怀疑您不能只使用样式表来做到这一点。

【讨论】：

你能用 jQuery 做这个吗？我想我会更好地理解
我不擅长 jQuery，但它必须非常相似。您将编写 $('image') 而不是 getElementById，然后使用 js 获取图像的尺寸，而不是为刚刚获得的变量设置适当的样式参数。

【解决方案5】：

好的，我的解决方案有点棘手，但它确实有效。它是一个 javascript，并根据需要包含 jquery。这个想法是创建一个新图像，将其添加到 DOM，等待它加载并获取其尺寸。之后，新图像被删除，宽度和高度应用于原始 img 标签。这是一个演示解决方法的 js fiddle 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;
}

【讨论】：

【解决方案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>

【讨论】：