Динамическая высота изображения

Question

Im любитель CSS и проектирование сайта. Я играл с этим в течение нескольких дней, поэтому я здесь.

С левой стороны у меня есть вертикальное меню. Справа слева от него у меня есть изображение шириной около 75%. Ниже я имею два divs (оранжевые и зеленые коробки с желтой линией).

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

Я играл часами с разными% и т. Д., Но пока не добился успеха.

Любые предложения были бы высоко оценены?

Код: опция меню Желтый контакт США (все пункты меню одинаковы)

#link_side6{ 
float:left; 
width:100%; 
clear:left; 
padding-left:0%; 
padding-top:6%; 
padding-bottom:6%; 
padding-right:0%; 
background-color:#f8e32b; 
} 

дивы Изображение:

Контейнер DIV для изображения

#banner{ 
float:left; 
width:75%; 
margin-right:0%; 
margin-left:0%; 
margin-bottom:0%; 
margin-top:0%; 
} 

Фактическое изображение

#changer{ 
float:left; 
margin-top:0%; 
width:100%; 
} 

Оранжевый Div:

#welcome{ 
clear:left; 
text-align:left; 
padding:3%; 
float:left; 
width:60%; 
background-color:#faa733; 
padding-bottom:12.5%; 

} 

Зеленый ДИВ

#upcoming{ 
float:left; 
padding:0.3%; 
width:33%; 
margin-top:0%; 
min-width:185px; 
background-color:#63d456; 
border-left:thick solid #f8e327; 
} 

изменения изображения и действует как ссылки на другие страницы.

Answer 1

Угадайте, что три кнопки слева имеют фиксированную ширину и высоту, вы можете установить изображение в качестве фонового изображения на UL, который обертывает кнопки и имеет ширину 100%. Изменение размера изображения с использованием фонового размера: обложка;

ul#header {width:100%; background-image:url(pathtoyourimage); background-size:cover; background-repeat:no-repeat;} 

<ul id="header"> 
    <li><a href="...">Join Us</a></li> 
    <li><a href="...">News</a></li> 
    <li><a href="...">Contact Us</a></li> 
</ul> 

В зависимости от того, какое значение имеет изображение, вы можете играть с фоном.