Question

CSS / HTML是否可以调整某些框的大小以匹配其背景图像大小？不使用javascript。

例如，假设我有一个最简单的div：

<div class="image">TEST</div>

.image {
    background-image: url(http://placehold.it/350x150);
    width: 350px;
    height: 150px;
}

我想将其大小调整为350x150维度而不对这些值进行硬编码。此外，我不能在此div中添加任何内容。

http://jsfiddle.net/5Dane/

编辑：我看到很多我已经知道的答案，谢谢他们，但不幸的是，这不是解决方案。下面我要解释为什么我需要这样的功能。

我要做的是带有步骤的表单（按钮上一页和下一页）。在会话中，我保存用户输入的所有值，但是有一些按钮会为用户添加更多功能（例如，多个动态添加的数据行）。我当然是用jQuery做的，但我希望表单能够在没有启用java脚本的情况下工作。

现在到了这一点 - 我试图找出如何区分用户点击的按钮。案例是我的所有提交按钮都需要是图像，而最简单的解决方案<input type="image"/>不会发送有关使用POST数据点击的按钮的信息。这就是我找到这个解决方案的原因：

<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />

/* Submit button with image */
input.submit_img {
    font-size: 1em;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
    border: solid 0px #000000;
    cursor: pointer;
}

http://jsfiddle.net/XRvqV/

这样我的表单会提交所有数据 AND 我会知道用户点击了哪个按钮。按钮看起来很好，就像它看起来一样。我想知道是否有可能使它更便携 - 我的按钮都有不同的功能不同的宽度。有人可以在这提出另一种方法吗？

Answer 1

不，你不能。 CSS不知道图像大小。你可以使用JQuery轻松完成。

JQuery exmaple

$(function(){
    var bg = $("div.image").css('background-image');
    bg = bg.replace('url(','').replace(')','');
    var newImg = new Image();
    newImg.src = bg;
    $("div.image").css("width",newImg.width);
    $("div.image").css("height",newImg.height);
});

Answer 2

这是一个黑客，并没有使用background-image（改为使用img标记），但这是我不用JS就能想到的唯一方法。

<强> HTML

<div class="container">
    <div class="image">
        <img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
    </div>
    <div class="content">
        some text
        <br/>
        some more text
        <br/><br/><br/><br/>
        text text text
    </div>
</div>

<强> CSS

.container {
    position: relative;
}
.content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    color: red;
}

基本上，您允许img标记来确定容器的高度和宽度。然后，在图像上叠加您想要的任何内容（我假设您想要放置一些东西）。

<强> jsFiddle

Answer 3

我会建议你另一种方法来解决你的问题。如果你使用bootstrap，你可以使用div来制作可调整大小的图像。

<div class="img-responsive">
     <img src="test.jpg" width='xxx' height='yyy' alt='test'>
  </div>

Answer 4

你不能只使用HTML。但是你可以用HTML做到这一点！

你应该试试这个：

background-size: values;

这样，您将背景图像的大小调整为容器的大小！

Answer 5

你不能直接这样做。

唯一的解决方案是获取DIV元素的BG并将新的DOM img元素附加到DOM节点，之后您可以使用图像的信息来添加正确的高度和高度。

如果你愿意使用jquery，你可以这样做。

      $(function(){
        $('.image').each(function(index,element){
          var _t = $(this);
          _t.data("LinkedImg","LinkedImage"+index);
          $('body').append(
          $('<img />',{
           id:"LinkedImage"+index,
           src:_t.css('background-image')
          }).hide());
        });

        $('document').on('load',function(){
        $('.image').each(function(index,element){
          var _t = $(this);
          var _tmp_img = $('#'+ _t.data("LinkedImg"));
          _t.css({
                width:_tmp_img.width(),
                height: _tmp_img.height()
          });
        });
        });
})

设置其背景图像的div大小

5 个答案: