Pure CSS Responsive Images

Pure CSS responsive images have the ability to adjust themselves with respect to the available viewport width.

Steps To Create Responsive Image

To make responsive image in pure css,just add .pure-img class to the <img> element base class.

The .pure-img, basically provides basic style to the image without any border and shrinks it, and maintains the correct ratio of the image with respect to the different viewport widths.

General Syntax

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

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

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