Вопросы Теги

Возможно ли, чтобы css flexbox реагировал, когда фон повторяется? [Дубликат]

java.lang.UnsupportedClassVersionError происходит из-за более высокого JDK во время компиляции и более низкого JDK во время выполнения.

18
задан NateW 4 May 2015 в 17:36
поделиться

4 ответа

Пусть прозрачное изображение диктует ваши размеры DIV.

jsBin demo

Внутри этого div поместить то же самое image 

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
</div>

установил это изображение на 

#mainHeaderWrapper{
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}

Таким образом, высота DIV будет определяться содержащимся невидимым изображением, если для параметра background-image установлено значение ] center, full (50% / 100%), он будет соответствовать пропорциям этого изображения.

Не уверен, хотите ли вы манипулировать цветами фонового изображения или что (используя CSS3 filter), но теперь, прочитав снова то, что я написал ... Не проще ли просто поместить изображение внутри DIV? :)

Нужно какое-то содержимое внутри DIV?

jsBin demo Из-за содержащего изображения вам понадобится дополнительный дочерний элемент, который будет установлен на position:absolute и действовать как элемент наложения 

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
   <div>
     Some content...
   </div>
</div>


#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
24
ответ дан Community 21 August 2018 в 05:21
поделиться
  • 1
    Спасибо, мне было интересно, как я собираюсь добавить контент внутри этого div, так что ваша вторая часть ответа очень помогла. – Al Hennessey 4 May 2015 в 17:54
  • 2
    Вторая часть была просто ROCK! – Hritik 13 February 2017 в 20:14
  • 3
    Великий ответ. Благодаря! – Bhargav Nanekalva 25 April 2017 в 11:41 

body{ margin: 0; padding: 0}

#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover; 
background-attachment: fixed; 
margin: 0; 
width: 100%; 
height: 100vh; 
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
<div id="box1">
		<h1>Code Bluster BILU </h1>
	</div>

0
ответ дан bilu sau 21 August 2018 в 05:21
поделиться

Если вы знаете пропорции изображения, используйте процентное отступы для определения высоты контейнера. Установите height:0 и установите вертикальное заполнение в процентах от ширины.

Ключи к этому методу заключаются в том, что вертикальное заполнение на основе процентов всегда связано с шириной.

Согласно box model (w3.org) :

Процент вычисляется по ширине блока сгенерированного блока, даже для «padding-top» и «padding-top», padding-bottom '.

Ниже изображение составляет 400px X 200px, поэтому соотношение высоты к ширине равно 1: 2, а padding-top установлено на 50%; 

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top:50%;
  background-image: url(//lorempixel.com/400/200/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image

В другом примере изображение равно 300px X 100px. Высота равна ⅓ ширины, поэтому для параметра padding-top установлено значение 33.33%: 

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top:33.33%;
  background-image: url(//lorempixel.com/300/100/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div id="mainHeaderWrapper"></div>
stuff below the image

Изменить :

Как было предложено Paulie_D, другое содержимое в div должно быть помещено абсолютно, как показано ниже. Я предлагаю также позиционировать эти элементы, используя проценты. 

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top: 33.33%;
  background-image: url(//lorempixel.com/300/100/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
div#inner_content {
  position: absolute;
  top:0;
  width:100%;
  margin-top:10%;
  color: #FFF;
  text-align: center;
  font-size:20px;
}
<div id="mainHeaderWrapper">
  <div id="inner_content">Hello World</div>
</div>
stuff below the image

7
ответ дан showdev 21 August 2018 в 05:21
поделиться
  • 1
    Это предполагает, что в div нет другого контента. Право? – Paulie_D 4 May 2015 в 17:06
  • 2
    @Paulie_D Да или, по крайней мере, относительно позиционированное содержимое. – showdev 4 May 2015 в 17:07

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

Размеры моего изображения: 2880x1410. Упростите размеры -> 96/47 (я использовал этот простой калькулятор отношения http://andrew.hedges.name/experiments/aspect_ratio/ ). Когда у вас есть упрощенное соотношение, подключите высоту и ширину к уравнению:

height: calc ((100vw * W) / H); Таким образом, мой мог бы прочитать: height: calc ((100vw * 47) / 96);

Не нужно беспокоиться о содержимом div либо (если они не подходят)

1
ответ дан user3614509 21 August 2018 в 05:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: