Question about Images and Responsive theme

[woolly bugger]

When I upload images using the attachment in the post and then insert them into the post. They look fine with the attachment setting of 800 px. on a computer.

However on mobile they photos don't scale down for the mobile scree like they do with an image that is inserted with the image tags.

If I set the attachment size to 0 the photos come in oversized and out of aspect ration, you then have to click on the photo for it to appear in the correct aspect ration...

[SychO]

I can't reproduce this, could you provide some Screenshots or possibly a link to the post in question ?

[woolly bugger]

This test post has the same image posted twice using different methods. Image size 1920 x 1080, Attachment settings 0

The first photo is uploaded via smf attachment and placed inline, the some photo has been uploaded to the server and placed in the post via the image tags



after the post loads you can click on the image and it will resize to the correct aspect ratio. Clicking again toggles back to the original size.



it does a similar display on the computer

[SychO]

Oh I see now, interesting indeed perhaps adding height: auto would fix the issue, but at the same time that would mean a height parameter would no longer make a difference.. then maybe javascript, have to test some more

thank you for the report

[drewactual]

add to css:

Code Select Expand


.inner img {
   width:800px;
   height: auto;
   max-width:90%;
   border:1px solid #cccc;
   border-radius:.5em;
   padding:3px;
}

@media only screen and (max-width: 600px) {
  .inner img {
               max-height:450px;
               width:auto;               
}}


obviously i have zero experience with 2.1, but... in 2.0 the image constraints in the admin settings never seem to work 100% of the time... css does. 

and... i added the border, border radius, and image padding because it makes it pop on your page... i've often considered joining your site- i grew up in upper east tennessee and fly fished all over the back country... it's been years and years since i've even been there.  i could still see myself heading back there when i retire- and that would put me right back in the fly fishing game.   my haunts were roan mountain, highlands, dennis cove, around unicoi county, and flag pond on the border... used to have a nice population of natives back in the day.

[Arantor]

The reason why the SMF restriction isn't 100% reliable is because it tries to load the image remotely and get its size, because that was written years before max-width/max-height existed in CSS.

[drewactual]

i did the firefox developer style sheet thing... forgot about emoticons above... so.. use this instead:

Code Select Expand


.inner img {
   width:auto;
   height: auto;
   max-width:90%;
   border-radius:.5em;
   padding:3px;
  box-shadow:#ccc 1px 1px 3px 1px;
}
.inner .smiley {border:none; box-shadow:none}

@media only screen and (max-width: 600px) {
  .inner img {
               max-height:450px;
               width:auto;               
}}

@Arantor : it worked fine for me for literal years- through various 2.0.x iterations... it's only when the web became image heavy and folks started using them liberally it reared it's head.  it's gotta be frustrating for developers of this thing.

[Arantor]

You mean it coincides with the rise of large image capturing devices and bandwidth being so plentiful no ones bothers to minimise images, such that if SMF tries to fetch the image size, it will abort due to running out of memory when it tries to open the image...

[drewactual]

heheheheeee..... verbatim...

[woolly bugger]

thanks @drewactual this will go a long way in making my life less crazy. I fished 101+ days in '17, not so many last year, but hope to return to triple digits soon. Time spent taking care of elderly parents....

[GigaWatt]

You mean it coincides with the rise of large image capturing devices and bandwidth being so plentiful no ones bothers to minimise images, such that if SMF tries to fetch the image size, it will abort due to running out of memory when it tries to open the image...

This is actually a pretty good explanation, thank you .

So, the solution is to increase PHP memory usage, right .

[Arantor]

The solution is to use tools that didn't exist when this was first written, namely CSS...