CSS to remove EEVblog sideways scroll for inline attached pics

[RoGeorge]

If an inline attached image is wider than the viewing area, the image does not auto-shrink its width.  Instead, a left-righ scrollbar will appear at the bottom of each post.

I want the images to shrink (only when they are too wide to fit), so the whole image to be visible without sideways scrolling.

For now, I have a Firefox plugin, Stylus, that can override the appearance of any web page by altering the page's CSS.  As an example, this is the CSS to put a black theme for EEVblog pages:

Code: [Select]

h1 {font-size: 1.30em !important}
h2 {font-size: 1.20em !important}
h3 {font-size: 1.10em !important}
h4 {font-size: 1.00em !important}
h5 {font-size: 0.90em !important}
h6 {font-size: 0.80em !important}

xx-large {font-size: 1.3em !important}
x-large  {font-size: 1.2em !important}
large    {font-size: 1.1em !important}
medium   {font-size: 1.0em !important}
small    {font-size: 0.9em !important}
x-small  {font-size: 0.8em !important}
xx-small {font-size: 0.7em !important}

html, body, p, table, th, tr, td, div, a, form, frame, input, script, ul, ol, dl {
   /*font-family: Verdana !important; */
   /*font-size: 9pt !important;*/
}
pre, tt, code {
   /*font-family: Consolas !important; */
   /*font-size: 12pt !important;*/
}
blockquote, q {
   /*font-style: italic !important; */
   /*font-size: 1.0em !important;*/
}


/* EEVblog Forum */
.frame, .roundframe, .plainbox, .dropmenu a, .hslice td, .titlebg td,
.tborder>.description, .main_content>.description, #recent>.description,
#header, #content_section, #footer_section, #main_container p {
   background: #222 !important;
   color: #fff !important;
}
#upper_section, .cat_bar, .catbg, .table_grid th {
   background: #357 !important;
   border-radius: 5px !important;
}
div.title_bar, h3.titlebg {
   background: #357 !important;
   color: #fff !important;
}
div.title_barIC, h4.titlebg {
   background: #555550 !important;
   color: #fff !important;
}
div.additional_row {
   background: none !important;
}
.inner, .signature, .custom_fields_above_signature {
   border-color: #aaa !important;
}
.upperframe, .upperframe span, .lowerframe, .lowerframe span {
   height: 1px !important;
   background: #aaa !important;
   border-left: 1px solid #aaa !important;
   border-right: 1px solid #aaa !important;
}
.table_grid td {
   border: 1px solid #222 !important;
}
.hslice td {
   border: 1px solid #444 !important;
}
.info, .post, .signature h5 {
   background: inherit !important;
   color: #fff !important;
}
.forumtitle a {
   font-size: 16pt !important;
   font-weight: normal !important;
   background: inherit !important;
   color: #fff !important;
   text-decoration: none !important;
}
.greeting {
   font-weight: normal !important;
}
.username h4 {
   font-size: 14pt !important;
   background: inherit !important;
   color: #fff !important;
}
.list_posts {
   border-color: #aaa !important;
}
.lastpost, .navPages, .keyinfo h5, .floatleft h5, .windowbg td,  .windowbg2 td, .windowbg h4,
.reset a, .nextlinks a, .innerframe a, .roundframe a, .navigate_section a, .pagelinks a, .smalltext a,
.windowbg a, .windowbg2 a, .stickybg a, .stickybg2 a, .lockedbg a, .lockedbg2 a {
   background: inherit !important;
   color: #fff !important;
   text-decoration: none !important;
}
.windowbg, .windowbg span.topslice, .windowbg span.botslice,
.windowbg span.topslice span, .windowbg span.botslice span {
   background: #444 !important;
   color: #fff !important;
}
.windowbg2, .windowbg2 span.topslice, .windowbg2 span.botslice,
.windowbg2 span.topslice span, .windowbg2 span.botslice span {
   background: #333 !important;
   color: #fff !important;
}
.stickybg, .stickybg2, .title_barIC {
   background: #4c4c4c !important;
   color: #fff !important;
}
.lockedbg, .lockedbg a, .lockedbg2, .lockedbg2 a,
.locked_sticky2, .locked_sticky, .locked_sticky a, .locked_sticky2 a {
   background: #534 !important;
   color: #ccc !important;
}
.stickybg a, .stickybg2 a, .lockedbg a, .lockedbg2 a {
   font-weight: normal !important;
}
.thanks {
   font-style: italic !important;
   font-size: x-small !important;
   color: #fde18e !important;
}
.vob_protected, .vob_protected a:link, .vob_protected a:visited {
   color: #bdb !important;
}
.bbc_standard_quote {
   background: #555 !important;
}
.bbc_alternate_quote {
   background: #444 !important;
}
.bbc_standard_quote, .bbc_alternate_quote {
   /*font-size: 10pt !important;*/
   line-height: 1.2em !important;
   padding: 0.5em 1.0em !important;
   border-radius: 5px !important;
   border-color: #aaa !important;
   color: #fff !important;
}
.bbc_link:link, .bbc_link:visited {
   border-bottom: none !important;
   background: inherit !important;
   color: #ace !important;
}
.bbc_code {
   /*font-family: Consolas !important; */
   /*font-size: 10pt !important;*/
   line-height: 1.2em !important;
   padding: 0.5em 1.0em !important;
   max-height: 24.0em !important;
   border: 1px solid #aaa !important;
   border-radius: 5px !important;
   background: inherit !important;
   color: #fff !important;
}
.codeheader, .quoteheader {
   font-weight: bold !important;
   font-style: italic !important;
   background: inherit !important;
   color: #fff !important;
}
.firstlevel span {
   border: 1px solid #222 !important;
   border-radius: 5px !important;
   padding: 0em 0.5em !important;
   background: #555 !important;
   color: #fff !important;
}
.firstlevel span:hover {
   background: #e70 !important;
   border-radius: 5px !important;
}
.dropmenu a:hover {
   color: #e70 !important;
}
#upper_section input, #quick_edit_body_container textarea,
.generic_list input, .floatright input, .righttext input,
.content textarea, .content button, .content input, .content select,
.titlebg textarea, .titlebg button, .titlebg input, .titlebg select,
.plainbox textarea, .plainbox button, .plainbox input, .plainbox select,
.roundframe textarea, .roundframe button, .roundframe input, .roundframe select,
.description textarea, .description button, .description input, .description select {
   border: 1px solid #777770 !important;
   border-radius: 5px !important;
   background: #555550 !important;
   color: #fff !important;
}
.buttonlist a span, .buttonlist a.active span {
   background: none !important;
   color: #fff !important;
}
.buttonlist a {
   background: #555 !important;
   border-radius: 5px !important;
}
.buttonlist a:hover {
   background: #e70 !important;
   border-radius: 5px !important;
}
.buttonlist a.active:hover {
   background: #e70 !important;
   border-radius: 5px !important;
}
.forumtitle a:hover, .bbc_link:hover, .navPages:hover,
.reset a:hover, .nextlinks a:hover, .innerframe a:hover, .roundframe a:hover,
.navigate_section a:hover, .pagelinks a:hover, .smalltext a:hover,
.windowbg a:hover, .windowbg2 a:hover, .stickybg a:hover, .stickybg2 a:hover,
.lockedbg a:hover, .lockedbg2 a:hover {
   color: #e70 !important;
}
.arp_left {
   width: 45% !important;
}
.post img, .attachments img, .smiley {background: #eee !important;}


I've noticed that the id of an inline image always starts with "thumb_ ... ".

For example, if I open this topic in a browser page that is only half of screen wide, the images will be too wide to fit:
https://www.eevblog.com/forum/projects/(cabin-fever)-soldering-station/
For a right click "Inspect element" on the first image from the link, I get

Code: [Select]

<img src="[url]https://www.eevblog.com/forum/index.php?action=dlattach;topic=239126.0;attach=976862;image[/url]" alt="" title="[Cabin Fever] - Soldering station" id="thumb_976862-0" style="width:1024px;border:0;">

If I change style="width:1024px;border:0;" with "width:100%", then the image will shrink to fit inside the viewing area, and the later scroll bar will disappear.

This is not perfect, because it will also enlarge smaller images to fit whatever the width of the Firefox is.  Ideally I would like smaller pics to stay at their size, but wider pics to shrink, but I don't know what to use instead of "width:100%".

I know nothing about CSS and its syntax.  How, and what to write in Stylus, so it will add the above CSS modifications to any inline attached images?

[MarkF]

Go to Stylish and get my latest changes to start:
   https://userstyles.org/styles/156638/eevblog-forum-dark-theme


To drill down a little here is the section I believe you are interested in:
   The sizes used are for my 1920x1080 resolution laptop.  Change it for your display.
However, there is still some image aspect issues.

Code: [Select]

.bbc_standard_quote iframe, .bbc_alternate_quote iframe, .list_posts iframe {
   width: 320px !important;
   height: 180px !important;
}
.bbc_standard_quote img, .bbc_alternate_quote img, .list_posts img {
   background: #ddd !important;
   max-width: 320px !important;
   max-height: 180px !important;
   object-fit: scale-down !important;
}
.bbc_img, .resized, [id*="thumb_"] {
   background: #ddd !important;
   min-width: 12.5% !important;
   max-width: 1152px !important;
   min-height: 12.5% !important;
   max-height: 648px !important;
}
.attachments img {
   background: #ddd !important;
   max-width: 1152px !important;
   max-height: 648px !important;
}


[RoGeorge]

That's great, thank you very much!

The one that is doing exactly what I wanted

Code: [Select]

.bbc_img, .resized, [id*="thumb_"] {
   max-width: 100% !important;
}
I would have never guessed that syntax, not in a thousand years.   

For example, before asking here, after some googling I tried, but without understanding,

Code: [Select]

[attribute^="thumb"] {
    width:100%
}and it didn't work.

Do you know any good read for a CSS intro, so next time when I'll try to make a change I won't have to fiddle with all kind of trial and error guessing, please?

[MarkF]

Do you know any good read for a CSS intro, so next time when I'll try to make a change I won't have to fiddle with all kind of trial and error guessing, please?

Sorry...
   Google, trial & error is where I'm at right now.

[mrflibble]

Do you know any good read for a CSS intro, so next time when I'll try to make a change I won't have to fiddle with all kind of trial and error guessing, please?

I tend to use w3schools as reference when a website needs greasemonkeying.

https://www.w3schools.com/cssref/pr_dim_max-width.asp
https://www.w3schools.com/Css/

[Doctorandus_P]

I'm also having some smallish issues with links to youtube vid's on this forum.
I usually use a rotated monitor 1920 pixels high and 1200 pixels wide for web browsing and about 30% of the video is then off screen.

I have no intention of messing with CSS myself though.
A more logical place (the only logical place) to fix this is to contact the maintainers of the forum and ask them to fix it properly for everybody on the forum.