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>

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>，但效果会相同。但是，如果您在position元素上也应用了img属性，那么您需要将z-index的{{1}}设置为大于.content的{{1}}

Answer 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

Answer 3

是即可。我们可以让背景图像适应它的div，就像让它响应一样。

响应式背景图片的提示： background-size:cover
-set bg image to background-size cover
-in css将填充设置为顶部和底部的百分比
- 使bg图像不重复

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

Answer 4

也许使用javascript，你可以获得图片的网址：

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;

我强烈怀疑你不能只用样式表来做这件事。

Answer 5

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

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>

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

6 个答案:

HTML

CSS

更新： jQuery版本