Hexoでasset_imgマクロを使いながらサイズを指定したい
ブログをHexoを使って管理している。
Hexoでポストに画像を追加する公式の方法は、asset_img
マクロを使うこと。
こんなふうに:
# 画像入りの記事
下に画像が入る。
{% asset_img path_to_img.png "Alt text" %}
この書式には、画像のサイズを指定する方法がなく、テーマにもよるとは思われるが基本的にmax-width:100%
が勝手に適用される。
横長画像ならそれでもよいが、縦長だと結構でかい。
指定するには<img>
タグを使えなどと書いてあるウェブサイトも結構あり、本末転倒である。
そこで、以下のようにするとそれっぽい見た目を得ることができたので共有する。
# サイズを制限した画像入りの記事
下に画像が入る。
<!-- Alt text (正確にはtitle属性だが)を使って画像を一本釣りするCSS -->
<style>
img[title="Alt text"]{
max-height: 300px;
// You can make other changes here as well.
}
</style>
{% asset_img path_to_img.png "Alt text" %}
workaround感は否めないが、とはいえこの方法を使えばサイズ以外にも自由にCSSを当てられるので結構いいのではとも思う。