Make images fill slide without using background-image

[mikepqr]

Is it possible to scale an image to the largest size such that both its width and its height can fit inside the slide?

Right now I am defining a css class like below for every slide I want to do this in, which is the kind of thing I was hoping to avoid by using markdown!

.foo {
    background-image: url(foo.jpg);
    background-size: contain;
}

[geewiz]

Have you tried using the max-width and max-height CSS properties?

[tripu]

I think the title of this issue is misleading; it has little to do with Remark. (You don't need to set the image as a background: you can also tweak an image's properties to fill the whole width/height, give it a different z-index, etc.)

I guess what you want to know is whether there's a predefined content class that does exactly what you need?

[Tschis]

@tripu I don't think the title is misleading because markdown automatically scales the image to fit the screen. It does not happen when using remark.

[tripu]

“Markdown automatically scales the image to fit the screen.”

Sorry, what do you mean?

An image in Markdown will produce an <img> in HTML; there's nothing implicit about how that image's going to by styled…

[Tschis]

@tripu

If you use this as an example markdown:

# Intent
![Hexagonal Architecture class diagram](https://raw.githubusercontent.com/iluwatar/java-design-patterns/master/hexagonal/etc/hexagonal.png)

You will notice it produces an image that is scaled and fits the screen.

However, if you throw this same .md file into remarkise or just build your remark presentation using this code as one of the slides, you will notice the image does not fit the produced slide.

---

Edit:

Also, about this:

there's nothing implicit about how that image's going to by styled…

You can see in the generated HTML of this .md that there is a style="max-width:100%;"

[tripu]

@Tschis:

“It produces an image that is scaled and fits the screen.”

No, it doesn't. See this GitHub gist. The second image is not scaled, but shown in its original size.

“You can see in the generated HTML of this .md that there is a style="max-width:100%;"”

That's just GitHub's own styling of its content. Nothing to do with Markdown [image syntax in CommonMark; in Daring Fireball]. It's GH doing something additional, not Remark lacking a feature of Markdown.

[tripu]

@williamsmj, this syntax is a bit more concise and will give you what you want (I think):

<style>
  .remark-slide-content {
    background-size: contain;
  }
</style>

background-image: url("foo.jpeg")
# Slide 1

---

background-image: url("bar.jpeg")
# Slide 2

---

etc

At least this avoids repeating background-size: contain; once for every slide, and defining new classes just for this…

See an example: rendered, source.

[Tschis]

@tripu Sorry, with "scaled" I meant "scaled down", being completely shown on screen.

I also used MarkDownLivePreview and Dillinger to test my example code, and both of them showed the image fully on screen, so I figured that's how it was supposed to work. Rechecking their generated HTML now shows no sign of the max-width being included, so I stand corrected. Still, somehow they fit the image within the screen.

@williamsmj I'm not entirely sure if your problem is the same as mine. But for what it's worth, I solved it by just adding the code below to the <style> of my remark file:

      img {
        max-width:100%;
      }

And then just using images normally ![Image](image.png) Maybe you can use a combination of that with max-height too to achieve what you need.

[abelards]

Seems solved, so I'm closing the issue.