CSS3 background-size: содержать;

Я немного застрял с некоторыми из новых команд CSS3 Background, которые задавались вопросом, может ли кто-нибудь посоветовать?CSS3 background-size: содержать;

Я пытаюсь создать изображение с фоновым изображением, которое динамически масштабируется до размера экрана/браузера.

вот пример эффекта я хочу достичь, это работает на < тела> тег http://www.css3.info/demos/background-size-contain.html

Проблемы, которую я имею, что < тела> тег не нуждается в высоте или ширине, определяющей, но < DIV> делает, вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title>background-size: contain;</title> 
<style type="text/css"> 

#please_expand { 
background-image: url(images/betweengrassandsky.png); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-color: #EEE; 
background-size: contain; 
} 
</style> 

<body> 
<div id="please_expand"> 
    <h1>Example J - background-size: contain;</h1> 
</div> 
</body> 
</html>

источник

2012-05-15 kie

высота надстройки: 100% и ширина: 100% –

Прежде чем изучать новые возможности CSS3, это может быть стоит изучать основы. – kapa

@ bažmegakapa << спасибо, я знаю основы ... не так ли? ... Предлагаемый комментарий не работает, я уже пробовал это до публикации. Я пытаюсь заставить DIV вести себя как тег BODY, а фоновое изображение заполняет всю страницу, динамически настраивая – kie

на блочных элементов (например, div), высота не работает точно так же, как ширина. Если вы не укажете высоту, элемент будет таким же высоким, как и его содержимое. Это одно.

height: 100% был бы способ пойти, если вы хотите, чтобы ваш div был таким большим, как body есть, но фокус в том, что a percentaged height always comes from the parent's height. Таким образом, вы должны установить height: 100% для всех родителей (в том числе html) для результатов кроссбраузер.

html,body,#please_expand { height: 100%; }

jsFiddle Demo

источник

2012-05-15 09:41:02 kapa

Thats the ticket .... Просто боковое примечание - как происходит сброс? Я не знаю слишком много о высоте 100% только, что он никогда не работает (не то, что у меня есть причина использовать его много). – kie

@kie Добавлено некоторое объяснение. 'height: 100%' всегда работает, вам просто нужно узнать, как это работает. Он всегда исходит из высоты родительского элемента. Если он «авто», он считается равным нулю. – kapa

Спасибо, теперь я понимаю, это очень полезная информация – kie

CSS3 background-size: содержать;

ответ

Смежные вопросы