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: 

1) Sample Code for Image to display and adjust automatically for different screen sizes (desktop, tablet, and mobile phones - responsive): 

<p>
<img alt="" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" style="max-width:95% !important; min-width:370px !important; width:100%; height:auto;" /> 
</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.

2) Sample Code for Clickable Image to view actual image size (will open in a new tab)

- 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.  

So, if I want to add a link to the same Image above, the code is

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

It should display like this:  

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

3) Sample Code 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="" src="/assets/images/15-Example-How-To-Add-An-Image-Desktop-View.png" style="max-width:95% !important; min-width:370px !important; width:100%; height:auto;" /> 
</a>
</p>

Should display: 

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