图像的动态高度

Question

我是一名CSS业余爱好者并且正在设计一个网站。我已经玩了好几天，所以我在这里。

在左侧，我有一个垂直菜单。浮在左边，我有一张宽约75％的照片。在这下面我有两个div（橙色和绿色框，黄色线）。

这是一个动态布局，基本上当我调整浏览器大小时，我希望图像的高度与垂直菜单的高度相同，即没有蓝色空间。当我不调整浏览器大小但是在图像和下面的div之间出现蓝色间隙后，这很好。我认为它可能与浏览器保持图片的宽高比有关，但我希望图像填满这个空间。

我用不同的％等玩了好几个小时但到目前为止没有成功。

任何建议都会受到赞赏吗？

代码： 黄色联系我们菜单选项（所有菜单选项都相同）

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

图片divs：

图像的容器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%; 
}

Orange Div：

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

 }

绿色div

#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％的宽度。使用background-size：cover;

调整图像大小

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>

根据图像本身的重要性，您可以使用背景位置。