Reveal.js: Question: how do I control image size in external markdown?

[faxm0dem]

![](path/to/image =150x50) doesn't seem to work

[anantshri]

so far i have been resizing images before hand or define a custom class and define css

[s-bernard]

I use html tag like <img src="image" width="40%">.

But It would be better to have a true markdown support.

[faxm0dem]

The best option we found was to create a custom css entry for each image _e.g._:

img[alt=name_for_alt] {
  width: 70%;
  border: none;
  background: none;
}

[bnjmnt4n]

You can use an <img> tag or implement a custom marked renderer.

[deitch]

I use html tag like ...

@s-bernard do you find that works? I find that when I have markdown enabled for a slide, all html is glossed over.

                <section data-markdown>
                    ## Some Header

                        Info over here

                    ![alt_text](images/an_image.jpg)
                    <img src="images/an_image.jpg"/>
                </section>

The first image shows, the second does not. Interestingly, if I give it a bad filename, I do get a console error that it could not find the image. But with a good one... it just doesn't show up, no html rendered for it.

[s-bernard]

@deitch I use an external markdown file. I have not tested with inline markdown.

[deitch]

Ah, OK. I will have to try that. Thanks.

I found some issues with my own. Basically, it is easier to do all html or all markdown. No easy combination.

[Marq-K]

With inline markdown I can simply use the css in a html comment to provide additional attributes to the img element, e.g.

![An image](images/an_image.jpg) <!-- .element height="50%" width="50%" -->

[DavidZemon]

I chose markdown because my HTML is pretty rusty. So, I thought it might be helpful to remind anyone else running into this that CSS can not be applied directly in this fashion, but only indirectly through the style attribute. For instance, I was trying to turn off the border, background, and box shadow for an image. My resulting Markdown looks like this:

![CMake logo](images/CMake-Logo-and-Text.png)
<!-- .element style="border: 0; background: None; box-shadow: None" -->

Anyway, thanks Marq-K for example! This is a lot better than converting the whole slide to HTML :)

[arganzheng]

if you are using kramdown, you can do this:

![test image size](/img/post-bg-2015.jpg){:class="img-responsive"}
![test image size](/img/post-bg-2015.jpg){:height="50%" width="50%"}
![test image size](/img/post-bg-2015.jpg){:height="700px" width="400px"}

see http://arganzheng.life/image-size-in-kramdown-jekyll.html

[meawoppl]

@arganzheng 's method is the only one that worked for me.

[Gamerlios123]

The best option we found was to create a custom css entry for each image _e.g._:

img[alt=name_for_alt] {
  width: 70%;
  border: none;
  background: none;
}

Doesn't work

[faxm0dem]

can you show a minimal example index.html and included files ?

[aaronjohnsabu1999]

I use html tag like <img src="image" width="40%">.

But It would be better to have a true markdown support.

How would you add a title and replacement text to this?

[geegatomar]

This line worked:
<img src="static/img/lion.jpeg" width="200">

These did not work:
<img src="static/img/lion.jpeg" width="200px">
<img src="static/img/lion.jpeg" width="80%">

[codenotworking]

@s-bernard

I use html tag like <img src="image" width="40%">.

Using percentage doesn't work when commenting in Github.

[FilBot3]

When I use something like Markdownlint, it flags on using HTML in your Markdown document. Should I just disable that warning for specific parts of HTML?

[tbrodbeck]

How is this issue closed? This is still not working

With inline markdown I can simply use the css in a html comment to provide additional attributes to the img element, e.g.

![An image](images/an_image.jpg) <!-- .element height="50%" width="50%" -->

This does not work for me