miaolz123 / vue-markdown

A Powerful and Highspeed Markdown Parser for Vue
https://miaolz123.github.io/vue-markdown/
MIT License
1.89k stars 257 forks source link

Img width not adpat to the parent div #71

Open Gavin-zsr opened 6 years ago

Gavin-zsr commented 6 years ago

When the imgrendered in the div, its size doesn't adapt to the parent div'swidth, if this img over the div's width, it will exceed the div. And setting the css is not useful for the img.

leosdutra commented 4 years ago

Any news on this? Facing same issue and not sure how to apply extra css to images rendered inside vue-markdown

Appreciate any suggestion.

ZeanQin commented 4 years ago

@leosdutra I had the exact same problem and solved it by removing the scoped attribute from the <style></style> tag in the SFC.

I initally had scoped style in the SFC like this, <style scoped> img { width: 100%; } </style> which translates to img[data-v-<uniq_random_id>] { width: 100%; } However, the component doesn't seem to pass down that id properly to the image element and therefore the style is not applied. Removing the scoped attribute therefore solves it.

Hopefully you have a similar set up and this helps.

A neater solution would be for the component to attach the id to all of its rendered elements, I think.