設置其背景圖像的div大小

CSS/HTML可以調整某個框的大小以匹配它的背景圖像大小嗎？不使用JavaScript。設置其背景圖像的div大小

例如假設我有一個簡單的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/

這樣，我的形式將提交的所有數據和我就知道用戶單擊了哪個按鈕。此外，按鈕看起來很好，就像它應該看起來一樣。我想知道是否可以使它更便攜 - 我的按鈕對於不同的功能都有不同的寬度。有人可以在此提出另一種方法嗎

來源

2014-01-21 Kelu Thatsall

你不能用純css/html做到這一點。您需要javascript來查看圖像，獲取其尺寸，並將其設置爲css。 –

您可以更改背景圖片大小，與div –

一樣努力思考爲什麼首先要做到這一點的用例。 –

我會建議你另一種方法來解決你的問題。如果你使用bootstrap，你可以使用div來製作可調整大小的圖像。

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

來源

2014-01-21 15:24:25

不，你不能。 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); 
});

來源

2014-01-21 15:24:27

你不能這樣做，只使用HTML。但是你可以使用HTML來做到這一點！

你應該試試這個：

background-size: values;

這樣，您將背景圖像大小調整爲容器的大小！

來源

2014-01-21 15:24:44

這是一個黑客，並沒有使用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

來源

2014-01-21 15:30:52 Zhihao

你不能直接這樣做。

將它取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() 
      }); 
     }); 
     }); 
})

來源

2014-01-21 15:34:58

設置其背景圖像的div大小

回答

相關問題