obsidian astro img resize

good enough

cluster: tech, digital_garden
intro:

• I like obsidian way to link images
• [[image]]: this one is the most intuitive for me
• [image](path): fine
• the first method is not work out of the box in astro, so I stick with the second method
  problem:
• I want to resize imgs to fit only 50% width
• to resize in .astro it need to be in /public
  • or you have to import them with astro:assets
  • I’m fine with it for now
• but img can’t be resize in HTML via markdown out-of-the-box
• so we have to use CSS
• gemini suggest me to write a flag in [image (flag)] and custom css to recognize that flag => resize image with that flag
• so I set (flag) to be |50%
• now the image can be both 50% in obsidian and astro

/* from gemini: Select any image where alt text contains "#half" */
img[alt*="|50%"] {
  width: 50%;
  height: auto;
  display: block; /* Optional: centers the image if you use margin: auto */
}

created on: Tue Nov 18 2025