Let's Use a Sample Code from the previous blog post at: 

How to Add an Image to a blog Post or web Page

The first screenshot's generic original code looks like this: (and the image protrudes, because of its original big size). 

<p><img alt="" height="635" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" width="1363" /></p>

So I am adjusting it to the code below: 

The adjustment would look like this on the Source Tab of the Content box: 

<p><img alt="" max-width="95% !important" min-width="370px !important" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" width="370px" /></p>

With this New Code, it should display like this: 

Remember to click the "Update Post" (or Update Page) at the bottom of the page.

Alternatively, you can also add a Link to the Actual Image (to also display the actual size of the image which will open in a new tab. So, if I want to add a link to the same Image above, the code above would be Changed from this:

<p><img alt="" max-width="95% !important" min-width="370px !important" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" width="370px" /></p>

To this:

<p><a href="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" target="_blank"><img alt="" max-width="95% !important" min-width="370px !important" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" width="370px" /></a></p>

So it can display small on small screens (without the image protruding, and triggerring the left to right scrolling), and will always have the option to view the image in its actual size.  

Notice that the image above is clickable, and it will open a new tab that would display the full sized image. :-) 

If you want to display the Link to the image as a pop-up, you can also select that setting in the Image Link, and change the code to this:  

<p><a href="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><img alt="" max-width="95% !important" min-width="370px !important" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" width="370px" /></a></p>

It's another option, but some Browsers dsiable pop-ups, I thought I'd also include that code here, in case you want to try it.

Related:

How to Add a New Blog Post

How to Add an Image to a blog Post or web Page

Or go to the Help Page for other Documentation or Tutorials:

Help