程序员经验分享-hwhale

让 Flexbox 中的图像填充所有垂直空间并保持完全可见

2023-12-11

我需要在 div 左侧放置一个图像，并放置该图像：

  • 与 div 高度相同（其本身具有非固定的、与内容相关的高度）；
  • 完全可见；
  • 保持其纵横比。

Flexbox 似乎非常适合这项工作，但当将图像设置为 100% 高度时，其尺寸保留自然宽度，内容会溢出到 div 下方。请参阅下面的片段：

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  flex: 0 0 auto;
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
}

.right {
  flex: 1 1 auto;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==">
  </div>
  <div class="right">right div</div>
</div>

The red circle is clipped but I'd like it to be entirely visible, like so: enter image description here

我尝试将图像放置在自己的 div 中并尝试使用各种溢出值，但没有成功。当使用开发工具禁用然后启用时，Chrome最终会正确显示它height: 100%在 img 元素上，但这在 Firefox 中不会发生。


这在某种程度上是不可能的，因为浏览器需要至少两次迭代才能正确计算最终宽度，这可能会形成一个循环。基本上，浏览器将首先忽略图像的百分比高度来设置容器的宽度/高度，然后将解析百分比高度，然后计算图像的宽度以保持比例，但不会返回调整再次更改容器的宽度，因为在某些情况下它可能会导致无限循环，这就是为什么您只会发生溢出。

这里有一个hack这只适用于 Chrome，您可以通过应用动画来强制再次计算宽度。

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
  animation:hack 1s infinite linear;
}

.right {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

@keyframes hack {
  to {
    height:99.9%;
  }
}
<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==" >
  </div>
  <div class="right">right div</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

让 Flexbox 中的图像填充所有垂直空间并保持完全可见 的相关文章

  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl

  • 交替 div 使图像向左（偶数）或向右（奇数）

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section

  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday

  • 如何使用 jQuery 拖放文本

    我需要创建一个消息模板 如下所示 你好 Stackoverflow Text A 感谢您的支持 Text B 在这种情况下 我需要使用拖放字段来Textarea 我进行了初步研发 寻找一些库来实现我的要求 并发现了这个通过拖放插入文本 ht

  • 使用 JSON 文件动态更新 HTML 内容？

    我想创建一个 JS 循环 使用 jQuery 来查看 JSON 文件 并根据是否 div ids 与 JSON id 值匹配 这需要易于扩展并且无论有多少人都可以工作 div 添加了盒子 我有一个 HTML 文件 设置如下 div clas

  • 可见性的替代方案：折叠在 IE 和 Chrome 上不起作用

    以下页面 table border 1 tr class cccc td one td tr table 仅适用于 Firefox IE 始终显示该行 而 Chrome 隐藏该行但显示其垂直空间 那么 如何仅使用 CSS 完全隐藏一行呢

  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex

  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro

  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section

  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之

  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t

  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w

  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函

  • 从网站存储数据的最简单方法（在服务器端）

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在

  • 有没有办法在 html 图像标签中显示位图数据？ [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width

  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会

  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p

  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小

  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • MySQL 连接运算符

    我不知道 MySQL 的连接运算符 我已经尝试过这段代码用于串联 SELECT vend name vend country FROM Vendors ORDER BY vend name 但这没有用 我应该使用哪个运算符来连接字符串 是

  • golang json 和接口切片

    我在迭代包含接口切片的接口切片时遇到问题 此问题是在尝试使用返回 JSON 数据的 API 调用时出现的 返回的数据相当多 并且结构根据请求的不同而有很大差异 API 文档中也没有 JSON 响应的结构 因此我尝试实现一些处理任意 JSON

  • 如何后台加载sapui5资源

    在我们的应用程序中 我们加载了许多 SAPUI5 库 index html 有以下代码来加载 SAPUI5 资源 在我们的 web xml 中我们已经提到https sapui5 hana on

  • dotnet 不支持多重继承。但多接口支持吗？ [复制]

    这个问题在这里已经有答案了 可能的重复 C 中的多重继承 dotnet 不支持多重继承 但多种接口支持 为什么会存在这种行为 有具体原因吗 您可以使用接口模拟多重继承 如果允许类的多重继承 则会导致钻石问题 由于不支持多重继承的原因 我建议

  • IF 条件 - 连接多列

    我需要统计一个术语出现的次数 不幸的是 这些术语组织得不好 因此一个术语可能会出现在多个列中 所以我不能只使用 If A1 HEALTH 1 0 因为HEALTH出现在多个列 A B C 等中 我尝试过嵌套 IF A1 HEALTH 1 I

  • 为什么 TF-IDF 的值与 IDF_ 不同？

    为什么向量化语料的值与通过向量化得到的值不一样idf 属性 不应该idf 属性只是以与语料库矢量化中出现的相同方式返回逆文档频率 IDF from sklearn feature extraction text import TfidfVe

  • 只有一个底层锁的读写锁？

    我已经使用 Python 的并发原语编写了一个读写锁 我认为 我在 SO 或其他地方读到的每个实现似乎都使用 2 个锁 一个用于读取 另一个用于写入 我的实现只包含一个用于读取的监视器 但我可能遗漏了一些重要的东西 任何人都可以确认这会起作

  • 电晕将单选按钮转换为数字文本框（lua）

    我正在尝试创建一个有关医疗保健的移动应用程序 我必须创建一个类似调查的应用程序来筛选患者 现在我已经使用单选按钮完成了调查的一部分 另一部分也看起来像这样 见下图 但我希望单选按钮更改为数字文本框 我的应用程序看起来像这样 现在我想将单选按

  • lapply 代替 for 循环进行随机假设检验 r

    我有一个看起来像这样的 df set seed 42 ID lt sample 1 30 100 rep T Trait lt sample 0 1 100 rep T Year lt sample 1992 1999 100 rep T

  • Rails table_name_prefix 未按预期工作

    我正在使用 Rails 4 我有app models admin rb and app models admin retention email rb有这样的东西 app models admin rb module Admin def s

  • 在 Javascript 中监听我的 Flash 事件

    我正在尝试使用 OVP 播放器构建一个带有播放列表的基本视频播放器 到目前为止 我已经弄清楚如何使用ExternalInterface输入新的视频源 但我不知道如何侦听Flash事件 EVENT END OF ITEM 如何在 Javasc

  • 如何使新添加的复选框与任务一起工作？

    我已在我的 inno 设置任务页面添加了新的复选框 但我不知道如何使它们与任务一起工作 我希望它们与脚本中的 任务 区域一起工作 Tasks Name Newcheckboox1 Description Newcheckbox1 MinVe

  • 使用附件时，Send-MailMessage 会关闭每第二个连接

    我正在尝试编写一个 powershell 脚本来向 30 个人发送带有一些附件的电子邮件 这些电子邮件是个性化的 因此必须单独发送 该脚本无需附件即可正常工作 但是 使用附件时 Send MailMessage 的所有其他实例都会失败 并显

  • 更改悬停时的背景图像

    图像的比例与该问题有关系吗 menu background black width 100 height 45px menu ul text decoration none list style type none menu li text

  • 将 UIImage 转换为 8 位

    我希望将 UIImage 转换为 8 位 我尝试这样做 但我不确定我是否做得正确 因为稍后当我尝试使用图像处理库 leptonica 时收到一条消息 指出它不是 8 位 谁能告诉我我是否正确执行此操作或如何执行此操作的代码 Thanks C

  • 将列表拆分为大小递减的子列表

    假设我有一个列表 list 0 1 2 3 我如何将列表分成类似的内容 new list 0 1 2 3 1 2 3 2 3 3 我尝试过使用 def change list new list for i in range len list

  • rPython 包无法在 R Shinyshinyapps.io 上安装

    shinyapps io 服务器没有安装 python 吗 因为包rPython安装失败 需要安装python 如果答案是否定的 我觉得很奇怪 因为 RStudio 本身有蟒蛇支持 shinyapps io 服务器是否支持 python 或

  • 在 Google Cloud Platform 存储桶上托管静态网站时的 DNS

    抱歉 如果我的问题看起来很混乱 我对 DNS 或托管只有一个基本的了解 故事是这样的 我创建了几个个人网页并注册了一个域名 然后我发现我的几个页面不需要 大 托管 最好在云中托管一个网站 我选择了 GCP 进行托管 发现this教程并遵循以

  • 拖动后标记位于地图中心

    我在我的网站上实现了谷歌地图 用户可以拖动标记并获取坐标 它工作正常 但要求是当用户拖动标记时 拖动标记后应该出现在地图窗口的中心 或者如果用户拖动地图 那么在这种情况下标记也出现在地图窗口的中心 我有以下代码 仅适用于地图上的拖动标记 但

  • 让 Flexbox 中的图像填充所有垂直空间并保持完全可见

    我需要在 div 左侧放置一个图像 并放置该图像 与 div 高度相同 其本身具有非固定的 与内容相关的高度 完全可见 保持其纵横比 Flexbox 似乎非常适合这项工作 但当将图像设置为 100 高度时 其尺寸保留自然宽度 内容会溢出到

热门标签