Динамически измененные изображения, относительное/абсолютное позиционирование?

Question

У меня возникли серьезные трудности с изменением размера изображения по отношению к окну браузера - ширина изменяется очень хорошо, но высота остается неизменной. Я пробовал высоту: 100% и высота: авто, а также высота: 100vh, но без кубиков. Я уверен, что это что-то делать с тем, как мои дивы выложены, вот соответствующий CSS:

.main { 
    z-index: 2; 
    width: 100%; 
    top: 0%; 
    height: auto; 
    left: 0%; 
    position: relative; 
    margin-bottom: 300px; 
    overflow: hidden; 
    } 

.container { 
    overflow: auto; 
    } 

.alphaleft { 
    background-color: #fff; 
    left: 0%; 
    top: 0%; 
    width: 50%; 
    height: 1000px; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    z-index: 5; 
    float: left; 
    } 

.alpharight { 
    background-color: #fff; 
    right: 0%; 
    top: 0%; 
    width: 50%; 
    height: 1000px; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    z-index: 5; 
    float: right; 
    } 

.alphaleftimg{ 
    background: url("images/bg.png") no-repeat; 
    background-size: 100%; 
    left: 0%; 
    top: 20%; 
    width: 100%; 
    height: auto; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    z-index: 6; 
    } 

.alpharightimg{ 
    background: url("images/bg2.png") no-repeat; 
    background-size: 100%; 
    left: 0%; 
    top: 20%; 
    width: 100%; 
    height: auto; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    z-index: 6; 
    } 

.floaters { 
    clear: both; 
    } 

и вот мой HTML в jsFiddle, чтобы сохранить длину сообщения: jsFiddle

Я в основном хочу, чтобы страница выглядела так:

с высотой изображения также масштабирования с окном браузера.

Любая помощь будет оценена! Спасибо!

Answer 1

CSS3 добавляет свойство фон-размер, который позволяет указать, что вы хотите, фон для покрытия контейнера:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

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