# 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 .

.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:

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