Tachyons Element Images

Last Updated : 03 Jun, 2022

Tachyons Element Images is used to fix an image’s width so the image can not stretch. We can insert an image through an image tag. The image tag has the following class which is used to enhance the image.

Syntax:

<img src=" " 
     class="Tachyons Layout Widths Classes" 
     alt=" ">

Tachyons Element Images Classes: There are no predefined classes that tachyons provide for this, we need to use width the lass to fix the width of the uploaded images.

To achieve the Tachyons Images element feature we need to use the below-mentioned element’s classes.

Tachyons Layout Widths: This is used to provide width to the image.

Below examples illustrate the Tachyons Element Images:

Example 1: In the below code we will insert an image using the Tachyons toolkit.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        div { 
            text-align: center; 
        } 
    </style> 
  
</head> 
  
<body> 
    <h2 style="color:green; 
               text-align:center;"> 
      GeeksforGeeks 
    </h2> 
    <h3 style="text-align:center;"> 
      Tachyons Element Images 
    </h3> 
    <div> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
             class="w-50" 
             alt="GFG"> 
    </div> 
</body> 
</html>

Output:

Tachyons Element Images

Example 2: In the below code we will insert an image using the Tachyons toolkit.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body { 
            background-color: lightgrey; 
        } 
  
        div { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green; text-align:center;"> 
      GeeksforGeeks Logo 
    </h2> 
    <h3 style="text-align:center;"> 
      Tachyons Element Images 
    </h3> 
    <div> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
             class="w-50"
             alt="GFG"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
             class="w-100"
             alt="GFG"> 
    </div> 
</body> 
</html>