如何利用 HTML 实现图片与导航栏的自适应布局？

在HTML中实现图片与导航栏的自适应布局，通常可以结合CSS媒体查询和相对单位（如百分比、em或vw/vh）来完成。以下是基本步骤：

1. **固定导航栏**：首先，创建一个固定的导航栏，使用`position: fixed`将其定位到页面顶部或左侧，这样无论屏幕大小如何变化，它都会保持可见。

<nav class="navbar">
   <!-- 导航链接 -->
</nav>

.navbar {
   position: fixed;
   top: 0; /* 或者 left: 0 for left-aligned */
}

2. **响应式图片**：对于图片，使用`<img>`标签，并为其设置宽度为100%或者最大宽度不超过容器宽度，可以采用max-width属性：

<img src="image.jpg" alt="图片描述" style="width: 100%; max-width: 100%; height: auto;">

3. **媒体查询**：添加CSS媒体查询可以根据设备视口尺寸调整布局。例如，在小屏幕上将图片缩小或隐藏：

/* 当视口宽度小于600px时 */
@media (max-width: 600px) {
   .container img {
      width: 50%;
   }
}

4. **弹性布局**：如果想让图片和导航栏在内容区域自适应，可以考虑使用Flexbox或Grid布局，它们能更好地处理元素间的空间分配：

.container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}