esaで画像を縮小して表示するcss

前提条件

スクリプトは許可させてください。

cssバージョン

記事の中のimgタグは以下の様に、URLの最後に決まった値を追加して

![image.png (53.0 kB)](https://files.esa.io/uploads/production/attachments/xxx.png?small)

記事の先頭で以下のstyleタグを追加する

<style>
.markdown img[src$="?small"]{objec-fit:contain;width:300px;}
</style>

画像ごとに任意の値を設定する事は出来ないが、smallの部分を増やす事は出来る。

jsバージョン

画像ごとに任意のcssを直接指定したい場合はこれ。ただし、記事編集中のプレビュー画面では動かない。

記事の中では以下のように書いて

![image.png (53.0 kB)](https://files.esa.io/uploads/production/attachments/xxxxx.png?width=300px)

記事の先頭に以下のコードをペーストする。

<script>
addEventListener("DOMContentLoaded",(e)=>{
  [...document.querySelectorAll(".markdown img")].forEach(img=>{
    img.style.objectFit="contain";
    [...new URL(img.src).searchParams].forEach(a=>{ img.style[a[0]]=a[1]; })
  })
}, false);
</script>

記事の中の画像タグに任意のstyle属性を付与出来る。