W3.CSS Images

W3.CSS offers a single class for managing images and making them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent and will grow and shrink according to the change in the size of its parent without losing its aspect ratio and w3-image does the same.

Example: Adding a responsive image to the HTML page.

Output:

Although it has only class, it can be incorporated with other classes to make various effects like round-edged image, bordered image, image as a card, etc. To add a round-edged image you can use w3-round or any other similar class.

Example: Adding a round-edged image on the HTML page.

Output:

You can also add a circular image by using w3-circle class to the image.

Example:

Output:

To add a bordered image we can use w3-border class. This effect also gives a thumbnail look to the image.

Example:

Output:

You can also use images as cards by using a w3-card class on the images.

Example:

Output: