Test External Image!
This is an image hosted on my Adobe Portfolio site. https://cdn.myportfolio.com/87125c19-34fe-4de3-9686-89319f4bbf44/6aad9fce-8f88-4aea-909b-6438c13ff7b3_rw_1920.jpg?h=f7661d1488f28e73eeabd9bcd48ff7e3
There are a few different ways to embed this into the page, but not all options give the same results.
❌ This image is uses the standard Obsidian markdown style.
- There is an alt text and a size written in the beginning of the link.
- This doesn't translate to Flowershow properly.
- The size is ignored, and a default width is used. (For some reason it doesn't fit the entire width of the inner column 100% by default.)
- The alt text we see online renders as
Alt Text | 750which includes the size in error.
✅ This image uses html style.
- Using the
widthattribute alone can get you up to 100% of the inner column, but won't let you go past 100%.
<img src="https://cdn.myportfolio.com/87125c19-34fe-4de3-9686-89319f4bbf44/6aad9fce-8f88-4aea-909b-6438c13ff7b3_rw_1920.jpg?h=f7661d1488f28e73eeabd9bcd48ff7e3" width="100%">
✅ this image also uses html style
- Use the
Max-Widthattribute to scale up past 100%. - This allows you to go beyond the max width of the inner column and fill the page more.
<img src="https://cdn.myportfolio.com/87125c19-34fe-4de3-9686-89319f4bbf44/6aad9fce-8f88-4aea-909b-6438c13ff7b3_rw_1920.jpg?h=f7661d1488f28e73eeabd9bcd48ff7e3" style="max-width: 120%;">
