0

This is my readme file:

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

I would like the box to expand vertically (or show a scrollbar) if header.svg is actually taller than 400px. I've tried:

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

but that does not seem to work. Any suggestions?

Here's the repo I'm working on for reference: https://github.com/da5nsy/css-in-readme-like-wat

Edit for clarity: You can't use a CSS stylesheet on github readme pages, but you can put it inside an SVG and then display that SVG. So my question is essentially - is there a way to display an SVG through HTML in a way that will allow it to expand at the bottom?

Danny Garside
  • 37
  • 8

1 Answers1

0

As per your comment, here's an example:

Image 1 is smaller than the div, image 2 is the same height and image 3 is taller. I've used scrollbar-gutter to keep the widths the same for all 3. Note the use of box-sizing: content-box to ensure the scrollbar doesn't appear when a border is applied for a div that's the same height as the image. Also note setting the image as a block element with display:block to ensure the descender white space disappears.

.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>
Adam
  • 5,495
  • 2
  • 7
  • 24
  • Ah OK. Thank you for the example but unfortunately that won't work for my use case. I should've been clearer (and will edit the question) - I mention that it is a github readme because you can't use CSS directly in a github readme - you need to [embed it in an SVG/foreign object](https://stackoverflow.com/a/66981634/6464224) – Danny Garside Nov 12 '22 at 22:12