Blogger - Add Images with Full width

Display Images - Fit to Page Width

To add image in a Blogger page, we can either drag and drop or Click-> Insert image in the tool bar..

When we add in either way the image box is restricted automatically to the size of 320, even if the image is bigger.

Lets suppose you have the page width set as 960 and you want it to the full width..

Solution 1:

One option is you can drag the box by the corner (to maintain aspect ratio) and fill to full width along with height..

This works good...

Solution 2:

But if you large number of images in the page like 20 image you have to add, and you have to drag manually. In that case, instead you can got to HTML View by clicking the first Icon in the tool bar to switch from Compose View to HTML View.

You can see a div tag within which and anchor tag and img tag nested it..

In the img tag, you have to change the width to 100% instead of specific number and remove the height attribute.

Also if the url in the img tag has something like s320, you change that to s1600 or to whatever value in href attribute of anchor tag.

You can use Notepad++ to replace by copying the html and formatting with XMLTools plugin -> Pretty Print..

Regex Search for height="[^ ]*" and replace with empty

Regex Search for width="[^ ]*" and replace with width="100%"

String Search for s320 and replace with s1600

Example

Before

After Replace

we can see the bold ones in the original are changed/removed in the below one...

Miles on IT

Search This Blog