Image Sizing

- Hugo

Problem: Hugo Manis Template is stretching images.

Well, this is being caused by ui.css.

img { width: 100%;}

First we need use a css class to override the global <img> style. Let’s make all single post layouts get a specific class.

Edit layouts/_default/single.html. Specifically, give the <article> tag a custom class.

<article class="content-article">

Then make a custom css file. Add a reference to it in /layouts/partials/meta.html before {{ if .Site.Params.HighlightJs }}.

<link rel="stylesheet" href="/css/custom.css"/>

.content-article img {
  width: 25%;
}

In Terminal run Hugo Server and you should see the style on your article’s images.

Before….

image-20180921212924114

After…

image-20180921213026797