Different widths for images and texts with Jekyll - html

Question

If the answer to my question seems obvious, please excuse me—I tried to do it myself, I searched around for a solution… and, unfortunately, I'm still stuck. :(
I am looking to set different widths for images and texts, so my blog can display large pictures while keeping a pleasant line length.
It would be easy to achieve, only if Jekyll didn't wrap all <img> in <p> tags. No matter how I change my CSS, it never does the trick.
Some time ago, I found someone's post on Stack Overflow stating that the solution is to specify a class directly in Markdown files. Like this:
[image-1]: {{ site.baseurl }}/images/lostcrow.jpg "A beautifully lost crow"
{: .classy }
It didn't work, not for me at least—the class being applied to the <img> tag, not to the <p>tag:
<p><img class="classy" src="/images/lostcrow.jpg" alt="A beautifully lost crow" title="Lost Crow" /></p>
So the image's width is still dependent on the text's width…
Please, is there a way to set different widths for images and texts with Jekyll? I would really appreciate your guidance.
Thanks for your time. :)

Answer 1

Negative margin on the image should work:
.classy {margin: 0 -100px; width: calc(100% + 200px);}
... or just like this:
p img {margin: 0 -100px; width: calc(100% + 200px);}
... or check this post: Making Jekyll img's wider than the text?

Answer 2

I don't know much about how Jekyll processes Markdown + HTML, but switching from Markdown to HTML just for images is a possible solution.
The Jekyll Docs have a nice example of passing parameters to the include tag in Jekyll. The example in the docs is similar to what I'm suggesting. You would have an image.html file in the /_includes/ folder that contains the <img> tag, classes, and anything else you need for images. You would pass the image url or file location as a parameter to the include so that it would load the image with all your HTML instead of Jekyll processing it and adding it's own HTML. Something like the following would work:
# /_includes/image.html
<img src="{{ include.src }}" alt="{{ include.alt }}" title="{{ include.title }}" />
# in some other file where you want to add an image
{% include image.html src="..." alt="..." title="..." %}
If you're not nesting the include tag under any Markdown like ## header or - list, Jekyll should hopefully just take the image.html and directly put it into the output without surrounding it with anything.
You could also add other parameters like height={{ include.height }} width ={{ include.width }} to manually set the height/width.
Worst-case scenario is switching completely from Markdown to HTML. It gives you full control of the output since Jekyll won't insert it's own wrapping tags. Switching would definitely be a hassle, but speaking from experience I definitely learned a lot writing my own blog in HTML. It definitely helped me understand how websites work and become a better web developer.
Good luck!