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

Pure CSS Responsive Images

Steps To Create Responsive Image

First Image

Second Image

Third Image

Web Tutorials