Javascript 在响应容器内使图像高度响应

当我调整宽度时，我有一个响应图像，但当我调整高度时，我得到一个滚动条。如何使其在高度上也具有响应性？ 没有背景图像

---

您可以这样做：

*{margin:0；padding:0；框大小：border-box}/*推荐*/
html，正文{/*已修改*/
宽度：100%；
身高：100%；
背景：#000；
}
.集装箱{
位置：固定；
底部：20px；
左：20px；
}
.菜单{
位置：相对位置；
/*最大高度：计算（100vh-50px）*/
/*最大宽度：100vw*/
背景：#fff；
溢出：自动；
边框：2件纯黑；
}
保险商实验室{
显示器：flex；
/*宽度：100%*/
高度：40px；/*需要根据您的需要进行定义/调整*/
列表样式类型：无；
填充：0 10px 0；
/*保证金：0*/
}
李{
显示：flex；/*已添加*/
对齐内容：中心；/*已添加*/
对齐项目：居中；/*已添加*/
弹性：1；/*修改*/
/*文本对齐：居中*/
填充：10px0；
光标：指针；
背景：rgba（0,0,0,0.2）；
}
李：悬停{
/*弹性：1100%*/
/*文本对齐：居中；已使用*/
/*填充：10px 0；已使用*/
/*游标：指针；已使用*/
背景：rgba（0,0,0,0.1）；
}
img{
显示：block；/*建议/删除底部边距/空白*/
最大宽度：100%；/*修改/推荐：默认情况下使用350px（或任何您想要的）宽的图像*/
最大高度：计算（100vh-60px）；/*强制/-ul的规定高度，即40px-底部：20px*/
}

一,
二,
三,

您可以这样做：

*{margin:0；padding:0；框大小：border-box}/*推荐*/
html，正文{/*已修改*/
宽度：100%；
身高：100%；
背景：#000；
}
.集装箱{
位置：固定；
底部：20px；
左：20px；
}
.菜单{
位置：相对位置；
/*最大高度：计算（100vh-50px）*/
/*最大宽度：100vw*/
背景：#fff；
溢出：自动；
边框：2件纯黑；
}
保险商实验室{
显示器：flex；
/*宽度：100%*/
高度：40px；/*需要根据您的需要进行定义/调整*/
列表样式类型：无；
填充：0 10px 0；
/*保证金：0*/
}
李{
显示：flex；/*已添加*/
对齐内容：中心；/*已添加*/
对齐项目：居中；/*已添加*/
弹性：1；/*修改*/
/*文本对齐：居中*/
填充：10px0；
光标：指针；
背景：rgba（0,0,0,0.2）；
}
李：悬停{
/*弹性：1100%*/
/*文本对齐：居中；已使用*/
/*填充：10px 0；已使用*/
/*游标：指针；已使用*/
背景：rgba（0,0,0,0.1）；
}
img{
显示：block；/*建议/删除底部边距/空白*/
最大宽度：100%；/*修改/推荐：默认情况下使用350px（或任何您想要的）宽的图像*/
最大高度：计算（100vh-60px）；/*强制/-ul的规定高度，即40px-底部：20px*/
}

一,
二,
三,

将其用于您的容器，并根据需要更改高度：适合对象：盖子；对象位置：中心；宽度：100%！重要的；身高：512px！重要的；溢出：自动，不更改图像的大小。我需要调整图像高度以响应用户屏幕比例。你的小提琴链接搞乱了。修复它现在链接已经不存在了抱歉：我在为你的容器添加主姿势时遇到问题，并根据需要更改高度：对象适合度：封面；对象位置：中心；宽度：100%！重要的；身高：512px！重要的；溢出：自动，不更改图像的大小。我需要调整图像高度以响应用户屏幕比例。你的小提琴链接搞乱了。现在链接已经不存在了抱歉：我在添加到主帖子时遇到了问题