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

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

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