<picture> with img-thumbnail class

I am trying to implement <picture> tag to selectively serve pictures; webp format for Chrome based browsers and jpeg fallback for other browsers. However using Bootstrap’s img-thumbnail class is not working properly, it creates handlebar like artifact on border sides.

Sample code:

<picture class="img-thumbnail img-fluid">
  <source srcset="/path/to/image.webp" type="image/webp">
  <img class="img-thumbnail img-fluid" src="/path/to/image.jpg" alt="">
</picture>

Bootstrap version: 4 beta

[andresgalante]

I’ve just tested it. @t5k6 you are right, the way we setup images and figures don’t support picture.

This is fixed by display: inline-block; the picture element. A possible solution is to follow what we do with the figure element with the class .figure.

I’ll follow the same approach and send a PR.

[mdo]

@mdo There is nothing wrong with the way we handle images. Do you you I think it has value to document this on our docs under images?

Yeah, good idea—I think it’d be helpful to have a code example and snippet in the Image docs page.