Figure shortcode & responsive images

support
1

Hello,

I’m playing with beg theme trying to be able to align (center) images in my posts as well as to make them responsive…

In my posts (using Asciidoc markup) I use code like this:

{{< figure src="image.jpg" title="Some Title" class="img-responsive center-block" >}}

which creates code like this:

<figure class="img-responsive center-block">

    <img src="image.jpg" />

   <figcaption>
    <h4>Some Title</h4>
    
</figcaption>

and that does not work with Bootstrap theme.

Otoh, if I add the following in the source:

<img src="image.jpg" class="img-responsive center-block" />

everything is fine.

Based on my understanding how CSS does work, I’d expect that img-responsive center-block classes would be inherited by img from the parent figure class, but it seems they’re not.

Do you have any suggestion how to use figure shortode to get desired behaviour?

2

I’m in the same situation. I don’t understand why the following bootstrap rule is not applied to <figure class="img-responsive">:

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}