设置溢出：github 自述文件上的 SVG 可见

【问题标题】：Setting overflow: visible for SVGs on a github readme设置溢出：github 自述文件上的 SVG 可见
【发布时间】：2022-11-12 04:04:22
【问题描述】：

这是我的自述文件：

<img src="header.svg" width="800" height="400px">

如果header.svg 实际上高于 400px，我希望该框垂直扩展（或显示滚动条）。我试过了：

<img src="header.svg" width="800" height="400px" style="overflow: visible">

但这似乎不起作用。有什么建议么？

这是我正在处理的 repo 以供参考：https://github.com/da5nsy/css-in-readme-like-wat

【问题讨论】：

您必须将 img 标签包装在 div 中。即使将 img 设置为显示块也只是调整图像的大小。
你能举个例子吗？

标签： html css github svg overflow

【解决方案1】：

根据您的评论，这是一个示例：

图片 1 小于 div，图片 2 高度相同，图片 3 更高。我使用scrollbar-gutter 来保持所有 3 个宽度相同。请注意使用 box-sizing: content-box 以确保在为与图像高度相同的 div 应用边框时不会出现滚动条。另请注意使用 display:block 将图像设置为块元素，以确保下行空白消失。

.container {
  display: flex;
  gap: 0.5rem;
}

.container div {
  border: 1px solid gray;
  height: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  box-sizing: content-box;
}

.container div img {
  display: block;
}

<div class='container'>
  <div><img src='https://www.fillmurray.com/180/300'></div>
  <div><img src='https://www.fillmurray.com/180/400'></div>
  <div><img src='https://www.fillmurray.com/180/600'></div>
</div>

【讨论】：