Follow

How can one make image look nicer? In this case smaller... I tried setting size in editor, but I think the theme just stretches it.
I could use some page builder for this, but since I would need it only for images, I'd rather not.
The coolest way would be to set it to default size compared to the screen or similar...

Custom CSS is one way it seems:

article .the-content img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 75%;
height: auto;
}

It says here:

w3schools.com/csS/css3_images.

that max-width: 100% should scale down the image and that the image should never scale up than original size. This doesn't seem to work in my case.

@paladin that is not correct and I would strongly advise against using w3schools, they have so incredibly many errors on their website, it's not even funny.

In this case, max-width: 100% means it will completely fill the parent container.

@yarmo would you know where to look for some useful css info?

@yarmo Lower image is bigger than what 75% should be so it was resized to 75%. Upper image is smaller than 75% and it wasn't resized to size larger than original. You say this shouldn't work like that?

@paladin You probably have a secondary class that gets used on smaller screens.

@hund Correct! I had to change width:75% to max-width:75% in theme's style.css to get image width 75% or less if the image is smaller than 75% of the width.
It wasn't smaller screens but everywhere.

Sign in to participate in the conversation
Fosstodon

Fosstodon is an English speaking Mastodon instance that is open to anyone who is interested in technology; particularly free & open source software.