11

是否可以<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>
4

6 回答 6

6

不，不可能使 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将显示在它上面。

另请注意，.contentdiv 可以<img>按出现顺序高于或低于 ，但效果是相同的。但是，如果您也position对元素应用属性img，那么您需要将 的 设置z-index为.content大于<img>

于 2013-08-18T09:32:54.217 回答
3

通过使用 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 演示

更新：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

于 2013-08-18T10:02:25.620 回答
1

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

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

看到这个链接：https ://jsfiddle.net/beljems/dtxLjmdv/

于 2017-08-09T03:50:45.170 回答
0

好的，我的解决方案有点棘手，但它有效。它是一个 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;
}
于 2013-08-18T11:21:31.373 回答
0

也许使用 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;

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

于 2013-08-18T09:25:47.137 回答
0

不需要任何 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>
于 2017-03-04T20:38:02.130 回答