Design comparison
Solution retrospective
I would appreciate it if someone could explain how to adjust the screenshot sizes when working with md-files. I was working with my Readme.md and came across a situation where the screenshot size for mobile devices was much bigger than I wanted, but I couldn't find how to do it in Visual Studio Code.
Thank you!
Community feedback
- @marviecephasPosted about 1 year ago
To adjust the screenshot size for .md (Markdown) files, you can use Markdown syntax along with HTML to control the image size. Here's how you can do it:
-
Markdown Image Syntax: Use the standard Markdown image syntax to embed your screenshot:
![Alt Text](image-url)
Replace "Alt Text" with a descriptive alternative text for the image, and "image-url" with the URL or file path to your screenshot.
-
HTML
<img>
Tag: You can also use HTML within your Markdown file to control the image size. To adjust the size, you can set the width and height attributes in pixels or other units:<img src="image-url" alt="Alt Text" width="300" height="200">
In this example, the width is set to 300 pixels and the height is set to 200 pixels. Adjust these values as needed.
-
CSS Styling: You can further style your image using CSS if needed. For example, to make the image responsive to the screen size:
<img src="image-url" alt="Alt Text" style="max-width: 100%;">
This will ensure that the image scales down to fit the available width while maintaining its aspect ratio.
By using these techniques, you can adjust the size of screenshots in your Markdown files to suit your needs. Remember to replace "Alt Text" and "image-url" with appropriate values for your specific case.
Marked as helpful0@For1207Posted about 1 year agoThank you very much, Marvellous! The HTML variant works best for me. @marviecephas
0@marviecephasPosted about 1 year agoYou're most welcome, I asked for help too :) @For1207
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord