Установить размер div его фонового изображения

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/

EDIT: Я вижу много ответов я уже был в курсе, спасибо за них, но это не решение здесь, к сожалению. Ниже я объясняю, зачем мне нужна такая функциональность.

То, что я пытаюсь сделать, это форма с шагами (кнопки предыдущего и следующего). В сеансе я держу все значения, введенные пользователем, но есть некоторые кнопки, которые добавят больше функций для пользователя (например, несколько динамически добавленных строк для данных). Конечно, я делаю это с помощью 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/

Таким образом, моя форма будет представлять все данные И я буду знать, какую кнопку нажал пользователь. Также кнопка выглядит хорошо, как будто она должна выглядеть. Мне было интересно, хотя если бы это было возможно сделать его немного более портативным - мои кнопки имеют разную ширину для разных функций. Может ли кто-нибудь предложить другой подход здесь?

Answer 1

Я предлагаю вам альтернативный способ решить вашу проблему. если вы используете бутстрап, вы можете включить div для создания изменяемого размера изображения.

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

Answer 2

Нет, вы не можете. 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 3

Вы не можете сделать это, используя только HTML. Но вы можете сделать это с помощью HTML!

Вы должны попробовать это:

background-size: values; 

Таким образом, вы будете изменять размеры фонового изображения к размеру контейнера!

Answer 4

Это взломать и не использует 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 5

Вы не можете сделать это непосредственно.

Единственное решение было бы извлечение в BG элемента DIV и прикрепить новый 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() 
      }); 
     }); 
     }); 
})