Auto-fitting images

tsvoronos's Avatar


09 Feb, 2015 06:38 PM

I apologize for asking this question so broadly, but can't figure out how to make this work:

I'd like images in a stylesheet to autofit to the preview window's width, as most of the style in Marked do. If there's an easy answer to this I'd love to know rather than digging into these style packages quasi-blindly.

  1. Support Staff 1 Posted by Fletcher on 09 Feb, 2015 06:46 PM

    Fletcher's Avatar

    That would be a matter of using CSS to set the width for images/figures
    to 100%.


  2. 2 Posted by tsvoronos on 09 Feb, 2015 07:46 PM

    tsvoronos's Avatar

    Hm, I'm using, which has

    #wrapper img{border:none;display:block;max-width:100%;margin:1em auto;}

    in the css component, and my preview still looks like this:


  3. Support Staff 3 Posted by Fletcher on 09 Feb, 2015 08:09 PM

    Fletcher's Avatar

    There's tons of resources out there for learning CSS. Perhaps some
    others can jump in here, but I don't have the time to walk you through
    it (there's a lot to cover!). In general, there are better places than
    this site to ask CSS questions.

    I will say, though, that max-width is just like it says -- the "maximum"
    width, not the actual width.

    If there's something that works in regular CSS and not when displayed in
    the Composer preview, then feel free to bring that up here. But I can't
    offer general CSS support, just like I can't offer general LaTeX support.


  4. 4 Posted by tsvoronos on 09 Feb, 2015 08:20 PM

    tsvoronos's Avatar

    Hi Fletcher,

    Thanks for your reply. I certainly wasn't asking for CSS help; my question was about whether MMD Composer interprets stylesheets in a non-traditional manner, since this same syntax works just fine in Marked.

    Apologies if my question was misinterpreted; from your response it sounds like this is a CSS issue, so I'll figure it out on my own.


  5. Support Staff 5 Posted by Fletcher on 09 Feb, 2015 08:52 PM

    Fletcher's Avatar

    You can't use Marked as a comparison -- Brett does a lot of hand-waving
    in Marked, so there's no telling what is actually happening. Composer
    uses what you give it, *except* to add some padding above and below to
    allow for synchronized scrolling (esp. in Typewriter mode), and a few
    things as specified in the preferences.

    Export your file from Composer as HTML and view it in a browser. If the
    browser and Composer are different, it's worth asking about here.


  6. Support Staff 6 Posted by Fletcher on 09 Feb, 2015 08:53 PM

    Fletcher's Avatar

    And you realize that Marked uses separate styling, right?? It doesn't
    (to my knowledge) support Composer's style sheets/themes.


  7. 7 Posted by tsvoronos on 09 Feb, 2015 08:58 PM

    tsvoronos's Avatar


    If you're interested, the issue is that MMD Composer appears to dismiss a large portion of Myword's CSS section due to the presence of "#wrapper" tags, which as far as I understand it are a fairly common way to specify wrappers in CSS. Again, dropping this into Marked does not have this issue at all.

    You said "If there's something that works in regular CSS and not when displayed in
    the Composer preview, then feel free to bring that up here." This seems to fit into that category, so there you go.


  8. 8 Posted by tsvoronos on 09 Feb, 2015 09:05 PM

    tsvoronos's Avatar

    I sent this without seeing your responses, so you can ignore the part about Marked. I do realize that it uses separate styling, but I took only the CSS portion of MMC's .style file and made a new .css file that I added to Marked.

  9. Support Staff 9 Posted by Fletcher on 09 Feb, 2015 09:11 PM

    Fletcher's Avatar

    #wrapper is not standard at all. You have to add something to your HTML
    with the #wrapper class for it to work.

    If you didn't add that, then it **shouldn't** work.

    (Caveat being that I am not looking at the style sheet, so I'm assuming
    your description is accurate).

  10. Support Staff 10 Posted by Fletcher on 09 Feb, 2015 09:14 PM

    Fletcher's Avatar

    Yup. Just use a regular browser with the exported HTML and then get
    back to me if there are issues.

    Marked is great, but it does a lot for you, which then confuses people
    because they don't actually understand what is going on (the magic
    "black box" approach). I like people to know what is going on and be
    able to tweak/fix it themselves. Different philosophies.

  11. 11 Posted by tsvoronos on 09 Feb, 2015 09:16 PM

    tsvoronos's Avatar

    Ok, I'll speak with the maker of that style. Thanks for the information Fletcher, didn't mean to waste your time.

  12. Support Staff 12 Posted by Fletcher on 09 Feb, 2015 09:21 PM

    Fletcher's Avatar

    You're not wasting it, just explaining why I can't get into helping
    everyone figure out CSS/LaTeX/<insert favorite hugely complicated
    software here>.

  13. 13 Posted by tsvoronos on 09 Feb, 2015 09:23 PM

    tsvoronos's Avatar

    For sure, and I'm sure you get a lot of requests like that; definitely wasn't my intention.

  14. 14 Posted by Evan Lovely on 18 Jul, 2015 07:11 PM

    Evan Lovely's Avatar

    Hi there! I work with CSS professionally and I can chime in here on the CSS rule needed for liquid, "squishy" images that are never bigger than their container and maintain aspect ratio with this CSS rule:

    img {
        max-width: 100%;
        height: auto;

    Hope that helps!

  15. 15 Posted by Evan Lovely on 18 Jul, 2015 07:25 PM

    Evan Lovely's Avatar

    OK, so I got it figured out!

    Step 1 - Right click on /Applications/MultiMarkdown Composer and select "See Package Contents"
    Step 2 - In the Resouces/ folder, you'll see all the default themes with a .theme extension; copy the one of your choice to ~/Library/Application Support/MultiMarkdown Composer/Themes/ and rename it.
    Step 3 - Open the new .theme file and you'll see a long line that starts with css = and has a comment of // Preview above it – that's the CSS that handles the style of the preview. All we have to do is add the CSS I mentioned at the end, though we need to keep it all on one line; so just add the code below between css = " and ";

    CSS to add:

    img {max-width: 100%; height: auto;}

    I'm also attaching a screenshot comparing the old theme and new theme file; hope this all helps! Cheers!

  16. Fletcher closed this discussion on 21 Aug, 2015 09:14 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac