TOP CATEGORIES

×

How to set the width and height property of an image?

T

Tanu Tripathi

Set Heigh & Width Property of An Image

There are four-way to write Height and Width property of an image element:

  • height
  • min-height OR max-height
  • width
  • min-width OR max-width

How to use CSS Height and Width property of an image element

Actually, Height and Width property is important of an image element; we can write CSS height and width property by using external CSS file (write the image CSS code in a separate CSS file and call this CSS file on head section of the webpage) OR internal CSS property on head sections of the webpage, and last one is very easy and flexible just write height and width property inline of the image element.

Example of Height and Width property of an image

  img {

        height: 200px; OR min-height: 200px;

        width: 200px; OR min-width: 200px;

  }

<img src="image_URL" />

The height and width 200px means that the image size is completely fixed for all devices like mobile, laptop, and desktop BUT the min-height & min-width are not fixed it will increase the size of an image depending on the device.

  img { 

        max-width: 1000px;

        max-height: 500px;

  }

<img src="image_URL" />

The max-height and max-width are also fixed for the maximum size of the image; supposed max-width: 1000px means that if the display device is supper big in that situation the image display on 1000px of an image it's doesn't matter device size. 

0 votes

Your Answer

Email: advertise@gdatamart.com

Donate: To Support US

© 2024 GDATAMART.COM (All Rights Reserved)