html - 图像动态高度

Question

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

在左侧我有一个垂直菜单。 float 到它的左边我有一张大约 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;
}

图像 div:

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

橙色分区:

#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

猜测左侧的三个按钮具有固定的宽度和高度，您可以将图像设置为 background-image 到 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>

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