Hi,
we have not change nothing.

it is normal, the scroll is required and depends of:
- image ratio
- browser height (if your browser have 100~400px of height, it' impossible render Menu,Image List,Main Image, Comment and Options)
- browser width (the image have the same width of window - exclude 15px pf padding)
- number of comment (the comment may be infinite)

But you can create own solution with some line of css (example in screenshot).

Thanks for the tip, but this is not what I want. I want it to work just like in your demo page where the image fits itself in the browser. As I said, the images that I am testing here are the same as the images that I sent to the demo page.

The first version of Social Profile Plugin as working fine... I understand that you said that you didn't do anything to change it, but somehow it did. I may be wrong, but I think that one of the purposes of responsiveness it to fit images to show 100% of it inside a div, and it is not happening here.

As a experienced developer professional as you are, you sure know how do people work - if there is something that is not on sight, they leave it ot just "don't know that it exists". To leave the interactive out of sight is not a good idea. Sure, I can reduce my images to fit a screen of 1024 x 768 or something, but will the users do it? Without mention that it will ruin the image for a 1920 x 1080 pixels resolution.

Please, think about it.

Ok,
the image are not fit with window, the only change is this:
in file /plugins/jsn/socialnetwork/app/config/bootstrap.php at line 199 and 200 you can set the image resize for uploaded photo, before PHOTO_WIDTH was 1200px now is 1400px.

In alternative you can add this directive to CSS to set max-height of photo:

#tag-wrapper img {

width: auto;

max-height: 400px;

}

Ok,

It really helped, made a difference. A few months ago I didn't care how my pages looked like in mobiles or something, and to be honest I don't like mobiles and something either (just like social networks concept - please, don't misunderstand "social networks concept" with your project concept, I am talking about a general concept here - I think that this kind of thing is underused and underestimated) - going back to the mobile thing... well, like it or not this is what most people have been using to be online, and now I worrie if all my ressources are available to the user, if the important things are visible and at the reach. This is why I am so anoying with layouts, this is why I've been pushing you with "little" things.

I don't know how other social networks deal with situations like this about the image viewer, but in my opinion it should have a way to show to the mobile user the comment area, just like to the tablet and "normal" user and it should change according to the way the user turns the screen (horizontal or vertical). My knowlegment in CSS and stuff is poor, I am trying very hard to learn it and understand, to do not depend on others or even not wast someone else's time, but it is a looooong term curve of learning, and evolution does not wait. I have my limitations, but I do what I can - in this case, I tried many things, but one way or another, something was always ending wrong.

Well, thanks for your help - I'll continue the tests..

I decided to use your tip but with a twist - if you see anything wrong, please correct me:

#tag-wrapper img {

	max-width: 80%!important;

	max-height: 800px!important;

}

This way, it fits nice on a 1920 x 1080 screen and also adjusts fine on most mobiles and tablets, it is not the ideal because sometimes the comments area gets hidden, so the user must scroll to see it, but it's ok now.

Thank you again.

I think the better is this:

#tag-wrapper img {

  width: auto !important;

  max-height: 60% !important;

}

in landscape window you see a fullwidth image (example smartphone)