html - 动态调整图像大小
问题描述
我有一个 div 元素,我在其上覆盖了一个由垂直堆叠的 svg 图标组成的垂直侧边栏。我需要侧边栏始终与父级高度相同,并且每当窗口大小更改时缩小/增大图标以填充空白空间。
当窗口变大时,我设法至少保持它们相同的大小,但侧边栏拒绝从某个点缩小。
我认为图像不会缩小,因为它们的父 div(侧边栏)不会缩小超过 7 个图标高度的总和。它也不会真正将图像缩放得更大,flexbox 实际上只是随着高度的增加而增加了更多的空白空间,这在这一点上是可以的。实际上,理想情况下,它们最初不大于 x,放大会增加空间,缩小会首先尽可能缩小空白空间,然后缩小图标。
我已经尝试了 2 个 Google 搜索页面的解决方案,以及 min-width、object-fill 等。而且我似乎无法解决它 - 如果父级被压缩,侧边栏会无限期地从父级溢出,因此它的高度将小于所有 7 个图标的总高度。
.sidebar {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
.sidebar-item {
flex: 1 1 auto;
background-color: black;
position: relative;
z-index: 1;
}
.sidebar-item img {
width: 100%;
height: auto;
}
<div id="map">
<div id="sidebar" class="sidebar">
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon1" alt="icon1">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon2" alt="icon2">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon3" alt="icon7">
</div>
</div>
</div>
解决方案
通过将这些属性添加到 sidebar-item 来解决:
display: flex;
min-width: 0;
min-height: 0;
推荐阅读
- python - Python:尝试将字符串写入新文件时仅写入字符串的最后一行
- html - Excel 宏仅执行到第 60 行,然后在发出获取请求时失败
- amazon-web-services - 如何递归删除对象
- javascript - 过滤功能不会删除我的空行 - Google App Script
- spring-boot - 分离 OAuth2 授权服务器和资源服务器
- asp.net-mvc - 捆绑和缩小的脚本乱序
- python - 数据表 fread 函数中的 index_col 参数
- r - 不包括重复出现值 R 的 sample() 函数
- r - 具有分组的数据表中多行和多列的中位数
- c# - Visual Studio 2017 - ASP.NET 对 .cshtml 的更改未反映