How to resize post images

[gusaidler]

Description

Hi there! First of all, I am absolutely grateful for the theme, after hours searching for one I found this to be the best for my needs, so thank you for your efforts :)

I wish to change the size of the "main" image on posts (the one set in the front matter - image.path), but could not succeed, probably because of my lack of knowledge on HTML and CSS.

I do believe it is something available on this section of _sass/so-simple/_reset.scss:

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%; /* part 1: Set a maximum relative to the parent*/
  width: auto\9; /* IE7-8 need help adjusting responsive images*/
  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/

  border-style: none; /* Remove the border on images inside links in IE 10-.*/

  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

I tried to change the max-width to 50%, which is what I want the size of the post image to be, but of course it messed up with all the other images :(

Environment

I'm using the latest version of your theme (forked the repo a week ago), and my site is hosted on Github Pages: https://gustavosaidler.com/

https://github.com/gusaidler/blog

[mmistakes]

Depends. The main image is styled differently in different layouts. For example on an archive page it's much smaller

than on the post page

What I would suggest is use your browser's web developer tools to "inspect" (right click... select inspect) the image element. It will show you the CSS and then you can search through the theme's _sass partials to find it and alter.

That CSS above for img is just a reset. In most cases the .entry-image has been styled with width: 100% so it scales to fill the parent container.

[gusaidler]

Fantastic, that's exactly what I wanted: changed .page-image.img.width of the file.../_sass/so-simple/_page.scss from 100% to 75% and it's beautiful 👍

Forgot how magical a simple inspect can be... I was looking at the wrong place.

Many thanks for your immediate response and support, cheers!