Image behaviour in page

This example shows the different behaviour of a small image being used in a page.  In the page for a large screen the image is intended to be small, almost like an icon/badge against the content.  How that image behaves on a small screen is determined by whether the image has preset dimensions or is set as "img-responsive" to fill a container.


The first method is to set the image with dimensions that limit the display size.  When the image is inserted into the page it is simply dropped in the same container as the text.  In this case, the container is a "div" element that a column in the page.

Here you see the Width and Height are set to 73 (pixels) on the main tab of the Image Properties dialog.  There is no class specified in the Advanced tab, the default value of "img-responsive" has been removed.

This image dislpays on a large screen like this
and on a small screen like this
The second method is to create a further column division of "2,10" in the container.  To do this position the cursor in the paragraph where you want the image and text.  Use the "Insert Bootstrap Row/Column structure" button (16) and add the entry with the "2,10" specification.  Now position in the new column that is 2 elements wide and insert the image, then add the text in the column that is 10 elements wide.
This image displays on a large screen like this. 

Almost the same as the preset size display, but control of the size is not precise.
and on a small screen like this

Now the image has filled the width of the container.  The container was a column, which on the small screen has now become a row, so the image fills the width of the whole row/screen.


There is no right way to use an image.  You must think about how you want it to appear on every screen size.  Choose the method to insert an image you think is appropriate.

IMPORTANT  Never set an image size to greater than 320 pixels wide.  That is usually the smallest width of a smart phone screen.  Anything wider that that will cause overflow and break the page appearance.

If you want an image to be as large as possible on a small device display, use the "img-resposive" class, it will be as large as possible in its conatiner on the page.