ADVERTISEMENT
ADVERTISEMENT

How to set the height of an image with CSS?

Learn how to set the height of an image with CSS?
Submitted by Shahnail Khan, on March 12, 2022

An image embedded in a web page is one of the most important aspects of web design. An image added using <img> tag in HTML alone won't work, you need to add dimensions to your images for responsive design so that image resolution is adjusted according to the device. We can easily alter an image's height and weight using HTML attributes and CSS properties. In this article, we'll specifically talk about how to set the height of an image with CSS?

CSS properties to set the height of an image

1) CSS height Property

It defines the height of the image in units of lengths (px, cm, pt., etc.) & %. The default value is auto, the image will adjust its height accordingly on the web page.

Syntax:

height: auto| length| %| initial| inherit

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>tutorial8</title>
   </head>
   
   <style>
      body{
      background-color: blueviolet;
      padding: 12px 2px;
      width: 50%;
      }
      .first{
      padding-left: 20px;
      border: 2px solid black;    
      }
      #alter img{
      height: 300px;
      }
   </style>
   
   <body>
      <div class="first">
         <h2>Original image</h2>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQF7Jmadyq1Q0onTRQvKbPr1W0x6aHMFHkPiw&usqp=CAU">
      </div>
      <div class="first" class id="alter">
         <h2>Altered image</h2>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQF7Jmadyq1Q0onTRQvKbPr1W0x6aHMFHkPiw&usqp=CAU">"  
      </div>
   </body>
</html>

Output:

set the height of an image (Output 1)

As you can see CSS height property targets only image added in first class (id-alter). Hence, the height of an image is increased by 300px.

2) CSS max-height and min-height Properties

These properties can also be useful in altering an image's height.

max-height property can be used to decrease the height of an image. If the value set by this property exceeds the image's size, this property won't work. The default value is none.

Syntax:

max-height: none| length| %| initial| inherit

min-height property can be used to increase the height of an image. If the value set by this property is less than the size of the original image, this property won't work. The default value is 0.

Syntax:

min-height: length| %| initial| inherit

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>tutorial9</title>
   </head>
   
   <style>
      .minheight {
      display: flex;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 30%;
      bottom: 55%;
      }
      .maxheight {
      display: flex;
      justify-content: center;
      }
      .minheight img {
      min-height: 400px;
      }
      .maxheight img {
      max-height: 200px;
      }
   </style>
   
   <body>
      <h2>Original image</h2>
      <div class="first">
         <img src="https://t3.ftcdn.net/jpg/03/36/97/58/360_F_336975809_VvYkV1QZX2E8igeS3kYpcBGiMcK6zWpL.jpg">
      </div>
      <h2 class="maxheight">max-height property
         <img src="https://t3.ftcdn.net/jpg/03/36/97/58/360_F_336975809_VvYkV1QZX2E8igeS3kYpcBGiMcK6zWpL.jpg">
      </h2>
      <h2 class="minheight">min-height property
         <img src="https://t3.ftcdn.net/jpg/03/36/97/58/360_F_336975809_VvYkV1QZX2E8igeS3kYpcBGiMcK6zWpL.jpg">
      </h2>
      </h2>
   </body>
</html>

Output:

set the height of an image (Output 2)

Three same images of different heights are displayed. We haven't targeted the first image with CSS. The second image is targeted using the min-height property, so the height of the image is increased. We have targeted the third image with max-height CSS property; hence, its size is reduced

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.