Масштаб div, чтобы соответствовать фону

У меня есть div с фоновым изображением, которое я хочу расширить на 100% ширину и автоматически масштабировать div, чтобы он соответствовал требуемой высоте изображения. На данный момент это не масштабирование высоты div, если я не установил высоту div на 100%, но затем он просто растягивается до полной высоты экрана, тогда как я хочу, чтобы он масштабировался до высоты изображения.

Вот html:

<div id="mainHeaderWrapper">


</div><!--end mainHeaderWrapper-->
<br class="clear" />;

Вот css:

    #mainHeaderWrapper{


     background: url(http://localhost/site/gallery/bg1.jpg);
     width: 100%;
     height: auto;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     background-size: 100% 100%;

     background-repeat: no-repeat;
     background-position: center center; 

 }

 .clear { clear: both; }

Спасибо за любую помощь.

Ответы

Ответ 1

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

демонстрация jsBin

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

<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 установлен в центр, полный (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%;
}

Ответ 2

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

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

В соответствии с box model (w3.org):

Процент рассчитывается по отношению к ширинесозданный блок, содержащий блок, даже для "padding-top" и 'Обивка дна'.

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

#mainHeaderWrapper {
  width: 100%;
  height: 0;
  padding-top:50%;
  background-image: url(http://lorempixel.com/400/200/abstract/1/);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

<div id="mainHeaderWrapper"></div>
stuff below the image

Ответ 3

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

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

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

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