How to Display Full Width Images in Hugo

Hongtao Hao / 2020-11-02


I originally thought it must be super difficult to have full width images in a Hugo post because the width of my body text is already defined and yet all figures have to be within body. I stumbled upon a very easy solution here .

Add the following1 to your website stylesheet:

.fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Then, when using Hugo’s built-in figure shortcode , include class="fullwidth" :

{{<figure src="/media/sgs/sgs-hostel.jpg" caption="At a hostel in Interlaken, Switzerland, by Hongtao Hao in May 2017" class="fullwidth">}}

The result is like this:

On the balcony of a hostel in Interlaken, Switzerland, by Hongtao Hao in May 2017

On the balcony of a hostel in Interlaken, Switzerland, by Hongtao Hao in May 2017


  1. It’s not my creation, but the codes from this tutorial . ↩︎

Last modified on 2020-11-29