(解決)Marpで画像サイズが変わらなくて困った話

4021 ワード
presentation Markdown Marp Markdown テキストリンク

Markdownでプレゼンテーションスライドが作成できるMarp。非常に便利で活用しています。

ある日、画像サイズを変更しようと下記のコードを埋め込んでみました。

slide.md
---
marp: true

---
# 画像サイズ変わらず
![30%](image.jpg)

ところが、ここのパーセンテージをいくら変えても、画像のサイズが変わりませんでした。
一旦保存して開きなおしても同じで、Marpのバイナリをダウンロードしてエクスポートしても、変わらず・・・

試行錯誤してピクセル直指定にしたら問題なし。割合指定したいのに、これは使いづらいなぁ・・・

slide.md
---
marp: true
---
# 直指定だとOK
![height:500](image.jpg)

ちなみに、背景だとOKなんですよね。

slide.md
---
marp: true

---
# 背景だとOK
![bg 30%](image.jpg)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267148/48b7cbe3-5296-de73-544f-711d5ca80f9d.png)

海外のサイトなども色々見てみたのですが、同じ問題に当たっている文献は見つからず・・・
悩んだ末に、HTMLのタグを使って埋め込みました。こちらの設定を有効にします。

で、比較のために2つのコードを埋め込んだ結果。

slide.md
---
marp: true

---
# 画像サイズ変わらず
![30%](image.jpg)

---
# HTMLだと変わる
<img src="image.jpg" width=30%/>

プレビュー結果

折角Marp使ってるので、できるだけMDの記法にしたいんですが・・・当面はこれでしのぎます。

もしご存じの方がおりましたら、情報お待ちしております！

2021/1/22 追記

Marpの作者様から、単一画像のパーセンテージ指定はスライドサイズによって表示同一性が確保できないため、現状あえて対応していないとのことでした。
https://marpit.marp.app/image-syntax

オリジナル画像の縦横比を保持しながらの拡大縮小は、縦横いずれかのpixelの直指定もしくは、HTMLタグでの対応となります。