How to Display Full Width Images in Hugo

Hongtao Hao / 2020-11-02

I 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 the body. I stumbled upon a very easy solution here .

Add the following CSS codes1 to your website stylesheet:

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

Thanks to Yihui’s post , I now know that the above snippet can be shortened to only two lines of CSS:

width: 100vw;
margin-left: calc(50% - 50vw);

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

{{<figure src="/media/cnblog/sgs/sgs-hostel.jpg" caption="On the balcony of 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 2022-10-16