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:
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
<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?