HTML Standard: <img> tag

HTML Standard

HTML Extended

<img> tag

Inserts an image.

Attributes

Attribute	Description
alt	Sets the description value.
class	One or more classes.
id	Id.
height	Sets the image height: px.
src	Path source of the image (as image file, base64 or as stream): JPG, PNG, GIF, BMP, WEBP and SVG. SVG images require ImageMagick extension.
style	Inline styles. Styles can also be applied using style tags.
width	Sets the image width: px.

To download images from remote URLs, please check that allow_url_fopen is enabled in the PHP config. If the remote images use HTTPS, please check that PHP is using a valid certification file and the SSL configuration is correct: More information.

Styles

Style	Description
border	border-color: hexadecimal colors (not all HEX colors are supported by MS Word for this style) border-style: dashed dotted none solid border-width: length: px
display	none
float	left right
height	auto length: cm, em, in, pt, px
margin, margin-top, margin-right, margin-bottom, margin-left	Property values: length: em, pt, px percentage Applied when setting a border
padding, padding-top, padding-right, padding-bottom, padding-left	Property values: length: em, pt, px percentage Applied when setting a border
vertical-align	middle text-top top
width	auto length: cm, em, in, pt, px

CSS Extended (Premium licenses)

Style	Description
max-width	cm, em, in, pt, px.
max-height	cm, em, in, pt, px.

Code samples

Example #1

<style>
    #mystyle {
      border-color: #FF0000;
      border-style: solid;
      border-width: 2px;
      margin: 2px;
    }
</style>
<img id="mystyle" src="https://www.phpdocx.com/img/preview/slider_promo_3.png" width="350" height="auto"/>This img has a border with a width of 1px, a color in a hexadecimal value and a solid style.

The resulting Word document looks like:

Example #2

<style>
    .mystyle {
        margin: 10px;
        border-color: #FF0000;
        border-style: dashed;
        border-width: 10px;
     }
    .mystyle2 {
        width: 300px;
        vertical-align: middle;
     }
     .mystyle3 {
        float: right;
    }
</style>
<p>
    <img class="mystyle" src="https://www.phpdocx.com/img/preview/slider_promo_3.png"/>This img has a margin in pixels and a border with a hexadecimal color, a dashed style and a width of 10 pixels.
</p>
<p>
    <img class="mystyle2" src="https://www.phpdocx.com/img/preview/slider_promo_3.png"/>This img has a width set in a percentage and a middle vertical alignment.
</p>
<p>
    <img class="mystyle3" src="https://www.phpdocx.com/img/preview/slider_promo_3.png"/>This img floats to the right.
</p>

The resulting Word document looks like: