How to change dimensions of header image for posts (and center the header)

[mrparker909]

in dss-blog\themes\hugo-academic\assets\sass\academic_root.scss
change the lines (around line #116):

img,
video {
  height: auto;
  max-width: 100%;
  display: block;
}

to be:

img,
video {
  height: auto;
  max-width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

[mrparker909]

A possible better approach would be to leave the _root.scss file alone, and put the css code chunk into a new file (and update the config.toml) as detailed here:
https://sourcethemes.com/academic/docs/customization/#override-a-template

[andkov]

The results I see right now indicate that ALL images in that post would be at 70% including those in the post. If we do not plan to add other images maybe it's not important. However, ideally, we would want to localize the effect to only the image in the header. Perhaps we should re-evaluate a low-tech approach. I'll experiment more

[mrparker909]

maybe CSS has a "keep image size" option for max-width, rather than specifying a particular pixel size. I'll look into it when I have a moment.

[mrparker909]

We can accomplish changing ONLY the header image by changing instead the file dss-blog/themes/hugo-academic/assets/sass/academic/_content.scss

Around line 58, change:

.article-banner {
  width: 100%;
  height: auto;
}

To be:

.article-banner {
  width: 960px;
  height: auto;
}