Image within sidebar overflows the width when set to 100%

[ma-sadeghi]

Here's part of my index.rst:

.. sidebar:: Highlight

    The animation below shows the end result of an image-based invasion
    percolation algorithm developed in PMEAL and implemented in PoreSpy.
    Unlike physics-based approaches like the Lattice-Boltzmann method, our
    approach is very quick and almost runs instantly on average-size
    images.

    .. image:: _static/images/image_based_ip.gif
       :width: 100%
       :align: center

and here's how it renders:

[ma-sadeghi]

I just found a fix. Instead of using image directive, I can use figure directive with figwidth attribute, which works fine without overflowing the container.

.. figure:: _static/images/image_based_ip.gif
   :figwidth: 100%
   :align: center

[pradyunsg]

Using :width: 100% injects CSS into the generated page such that I couldn't ever figure out how to make work right. Using figures works, because they get wrapped and that wrapper "just does the right thing".

I wish this were easier, but hey, I'm glad you found the workaround. :)