freeCodeCamp/guide/english/css/css-images/index.md

title
CSS Images

CSS Images

This helps in adding an image to a website.

Code Sample

<img src="picture.jpg" alt="Picture" width="100" height="100">

• src: It consists the value of the path to the required image
• alt: If the image is not displayed then an alternate text can be displayed using alt attribute.
• width: This specifies a width for the image(can be percent or px or auto)
• height: This specifies a height for the image(can be percent or px or auto)

CSS Defaults

The img element will be rendered by default in most browsers to be displayed as an inline-block display type unless specified otherwise.

img {
     display: inline-block;
     }

More Information:

It is advised to change any one parameter, either height or width, to get a proportionate image. Changing both dimensions results in forced scaling and is not advisable.

Properties

image-orientation image-rendering object-fit object-position

Functions

linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() element()

Datatypes

<image> <uri>