Pure CSS Responsive Images

Pure CSS responsive images have the ability to adjust themselves with respect to the viewport width. It means that responsive images will never exceed their viewport's width. This approach allows images to scale down proportionally as the viewport size changes, maintaining their aspect ratio.

Steps To Create Responsive Image

To make a responsive image in pure CSS, add the .pure-img class to the <img> element's base class. This class sets the image's max-width to 100% and height to auto.

  • The max-width: 100%; property specifies that the image will never exceed the viewport width.
  • The height: auto; property sets the aspect ratio of the image, ensuring that it scales proportionally.

General Syntax

      <img src="https://picsum.photos/seed/picsum/200/300" class="pure-img" alt="Image">
    

Source Code

          
            <div class="pure-g ">
    <div class="pure-u-1 pure-u-sm-1-3 " >
      <h3 class="heading--center">First Image</h3> 
      <img src="https://picsum.photos/seed/picsum/200/300" class="pure-img" alt="Responsive Image"> 
    </div>

    <div class="pure-u-1 pure-u-sm-1-3 ">
      <h3 class="heading--center">Second Image</h3> 
      <img src="https://picsum.photos/200/300?grayscale" class="pure-img" alt="Responsive Image"> 
    </div>
    <div class="pure-u-1 pure-u-sm-1-3">
      <h3 class="heading--center">Third Image</h3> 
      <img src="https://picsum.photos/200/300/?blur" class="pure-img" alt="Responsive Image"> 
    </div>
  </div>          
        
Try it now

Source Code: Output

First Image

Responsive Image

Second Image

Responsive Image

Third Image

Responsive Image

Rounded Corners Image:

The border-radius property of CSS is very helpful to create a rounded corner image.

Rounded Corner Image
 
    img{border-radius:10px;}
   

Circle Image:

To create a circular image, set the border-radius property value to 50%. Keep in mind that the image width and height should be the same; otherwise, it will create an elliptical image.

Rounded Corner Image
 
    img{border-radius:50%;}
   

Web Tutorials

Pure CSS Responsive Images
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4