Good morning! Welcome to your website development training center.
Am gonna teach you how to set the maximum width and maximum height of images or any element using CSS. I wrote images because that's most commonly you applied it to.
Why would you want to set the maximum height of something since you can resize it using HTML or some folder editing software, why do we tell CSS that we need a maximum height for an image?
For example, let's say we are making a website, that you later want to change into your blog or something and you always copying images from other websites and paste it on your blog.
First of all, that's illegal I advise you don't even do that. The sizes are always different and you always get a random pictures to put on your website.
Therefore, if you don't always want to go into your photo editing program to resize everything, you can just tell CSS, this is the size that I want this image to be and aside from that, let me give a another better example, if you went to jiji.ng and you upload the photo of the items you want to sell and they are of different sizes and different types but when jiji displays it on the main page, they have the same nice little thumbnails.
In other to give different photos the same size, you need to give a kind of guideline. In this tutorial, we going to work with images, so... Copy like 3 images or more and paste it in the same directory where your html files are.
Let's create a file and save it with img.html copy this 👇 code and paste it in the empty text editor (img.html)
______start from <!doctype html>_______
<!doctype html>
<html>
<head>
<title>TopCRIX Studio</title>
</head>
<body>
<img src="crix.png">
<img src="topcrix.png">
<img src="webdev.png">
</body>
</html>
________stop at </html>________
This is my 👆🏽preview. I have 3 photos
1. Regina Daniel
2. TopCrix logo
3. An advert of making money via blog
You can have the same image because you don't have the same image on your folder, that's why you need to use your own image and make sure you refer the name of your images in the src (source) of your img (image) tags.
As you can see, these 3 images are of different sizes that's why they are not equal in size. We all know that this is not looking good.
In other to set a maximum height for all images on your webpage, you need is to select img in the CSS style and use the property: max-height: and you can use any value: 200px and again you need to add another property: max-width and add the value: 200px
Like this👇
NOTE: You can use any amount of pixel base on the size of how you want your images.
So... What we are telling our browser is that if you have any image that is taller than 200px shrink it down to 200px and if you have any image that is fatter than 200px skin it down to 200px
And when we preview these, our big images fit nicely on our webpage.
Aside from max-width and max-height, we also have min-width and min-height but I don't think you need that. The only rule I used mostly is max and that's when I make online shopping website, I will take the images and shrink them down to thumbnails so all the images on the website fit nicely or if you make a website like Facebook where our users upload different types and sizes of photos, you might wanna shrink it to fit as a profile picture.
That's all about max-height and max-width it's very easy to understand and don't forget that you can also use it for other elements not only images (another good example is table).
