add class "img-responsive" to <img> tag in pod

[skaji]

Now style attributes for <img> tags are not allowed (cf #1844).

Then <img> can be bigger than the parent element.
See, for example, https://metacpan.org/pod/release/SKAJI/Parallel-Pipes-0.002/lib/Parallel/Pipes.pm

This pull request adds class "img-responsive" to <img> tag in pod so that images are made responsive-friendly.
See also http://getbootstrap.com/css/#images

[coveralls]

Coverage remained the same at 69.5% when pulling 20bc1a6 on skaji:pod-img into 8daecc2 on metacpan:master.

[oalders]

Thanks @skaji!

[haarg]

This breaks some uses of images: https://metacpan.org/pod/Acme::CPANAuthors::Nonhuman

[skaji]

@haarg thanks for pointing out that.

before

after

what to do

If we keep previous behavior, then I think we should set class="img-responsive" only if <img> does not have the width attribute.

@haarg What do you think?

[haarg]

@skaji We should probably investigate the current uses of inline images more thoroughly. Having the width and height set seems a little too incidental to use for this purpose.

[karenetheridge]

:(

[Grinnz]

Since according to bootstrap docs the img-responsive class adds the following styles: max-width: 100%;, height: auto; display: block; then instead of setting that class, the first two styles could be set, excluding display: block. That seems to work for scaling the Parallel::Pipes image, and images like in Acme::CPANAuthors::Nonhuman don't each go on their own line.

[skaji]

My original intent for this PR is below.

Since #1844, style attributes for <img> tags have been not allowed.
I used to use <img style="max-width:100%;" ...>, but it does not work anymore.
So I want to add style="max-width:100%;" to <img> tags somehow.

Yes, I missed the inline usage of <img> tags, sorry.

I'm totally okay with reverting this PR for a while.

@Grinnz Thanks. Sounds good.