(Resolved) - Auto Scale Image width to 100% through css

[qq]

Forum URL: streitstadt.boards.net/


I want all non-tabled images to automatically resize to 100% forum width, or at least a comfortable minimum size. On a previous host we used 700px, which had a good feel.

Instead what we get is a small image that is further downsized:

I tried searching the support forum/google without luck.
I found forum settings -> forum -> Display Large Images
as, but seem to only be able to reduce things, not make our small images larger.

I don't want to require all users to individually format images to get the default full-size behavior.

Thank you for your time!

[Michael]

Hi,

The setting you mentioned (Admin>Settings>Forum Settings, Display Large Images) would be the setting you'd want to change to make images appear at their complete size. However, this wouldn't enlarge smaller images to bigger than full-size. Is that what you're looking to do?

[qq]

Yes, I want to make sure if images are posted that are 400px, they will still stretch (in h+w ratio) to 700px+ (or 100%) depending on how wide the forum is being viewed at.

Also, even with that setting at full size, my forum is still resizing these images to -75 /-25% (visible on this thread)

[Michael]

Oct 12, 2018 16:23:02 GMT -8 qq said:

Yes, I want to make sure if images are posted that are 400px, they will still stretch (in h+w ratio) to 700px+ (or 100%) depending on how wide the forum is being viewed at.

Also, even with that setting at full size, my forum is still resizing these images to -75 /-25% (visible on this thread)

Well, after doing some digging it appears that changing that setting only applies to images posted after the setting has been changed!

I don't particularly love that behavior as it doesn't really make sense to me so I'm making a note of that for the future.

This code should do what you're looking for: 



.message img:not(.smile) {

min-width: 700px;

}

[qq]

Thank you again!

This works great, except that it also changes icons in the forum- For example, the quick reply buttons go up to 700px as well

[Matej]


.post .message > img:not(.smile) {
min-width: 700px;
}



That could be a possible solution.
This should target all posts messages, where the first child is the image. Meaning, it should not affect anything but images directly posted (not avatars and other images in quotes and similar), but it will also not resize anything deeper (if someone wraps the image in some other element, like a link).

[qq]

Tried it out with different px sizes & 100%... it works on reload, but immediately gets resized as you watch, back to the width it was before adding the code, like something is overriding it? You can see the unwanted behavior here.

[Craig]

You have a plugin which resizes images to a smaller size, looks like it is set to resize large images to be 750px in width, maximum. That is the effect you are probably seeing. Try disabling that plugin and see if the images then display how you like.

[qq]

That was all it was!! Thank you very very much!

[Craig]

No worries. Glad you got it resolved