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.