Immortal Ideas
Resizing The Hero Image
So Do you Remember The Hero Image? Don't you think it's too big? You can see a horizontal scroll. Let's resize it to fit the screen.
Let's put the CSS styling instruction into the header.
Step 1 - Add a Class or Classifier to the image. Classifier is nothing but an ID. You can use any word as the classifier name.
<img class="hero" src="Images/Mars-Photo.jpg">
The class here is "hero" (I used the word "hero" because it is the hero image. You can use any word)
Now let's add the styling in the header section.
<!DOCTYPE html>
<html>
<head>
<style>
img.hero {
width:100%; height:auto
}
</style>
</head>
<body>
<h1>Mars Calling. Get Your Tickets Now!</h1>
<img class="hero" src="Images/Mars-Photo.jpg">
</body>
</html>
Look at the highlighted part. It is in the <head> </head> section. The element starts with <style> and ends with </style>. Now look at the img.hero part. We use the word hero because that's what we used to classify the hero image.
Using 100% as the width makes sure that no matter what the screen size is, the image will fill the whole screen. In short the image will be responsive. And keeping the height as auto, will make sure that the aspect ratio remains correct. So when you resize your browser, the image width will be resized and the height will automatically be corrected based on the width.
This is before resizing..
This is after resizing
You can set a particular size for the image by using width:100px; height:100px (or any value of your choice).
Pro Tip: Although you can resize your image with CSS, you might want to upload an already resized image to save bandwidth.
