Today’s topic is,
How to make banner image responsive in your website!
You might also like: Creating responsive banner slide show using bxslider
How does making banner image responsive work?
Here, in this tutorial – I will be implementing pure CSS3 to make an Image responsive. I will write a global style for that Image as well as CSS3 media queries to make that Image to be fit within the screen and occupy available space. Thus, the Image will be legible enough in small devices.
This image will be responsive on all screen resolutions like:
- smaller mobile screens
- 320X480 – iPhone [Portrait orientation]
- 360X640 – One of the smart phone
- 780X1024 – Larger tablet or a 17″ Desktop
- Larger desktops
Getting you started!
If you have Dreamweaver – it would be awesome. But, not to worry – you can even accomplish this task using at-least Edit Plus or Notepad++ or even Notepad itself.
Follow the steps below:
Step1: Create your project folder/directory inside one of your safe drives. Name it “image responsive“.
Step 2: Open Dreamweaver and create a HTML. Are you not aware of how to use Dreamweaver? See how to use Dreamweaver.
Step 3: Save that HTML file inside your “image responsive” folder.
Step 4: Again, create a folder by name “images” inside the “image responsive” folder.
Step 5: Lastly, create another folder by name “css” inside the “image responsive“.
Please see below screenshot for the folder structure:
Step 1: Once done with that – please open the HTML in you HTML editor. May be Dreamweaver, Notepad ++, Edit plus or Notepad.
Step 2: Go to your “images” folder and copy any image that you want to make responsive. I’ll go online and create a dummy image for this tutorial. Click here if you also want to take advantage – Its really quick and simple.
Step 3: Write the following code after the <body> tag in your HTML file you just created.
<img src="images/Responsive_banner_image.jpg" width="600" height="300" alt="Make Image responsive" />
What is it?
1. I have wrapped the Image inside a <div> which is not a mandatory stuff there. Image can go alone and be responsive.
2. Even though I have provided width and height – the image will shrink and grow as and when you shrink your browser. This works well on Internet explorer as well along with Firefox, Chrome and Safari.
Step 4: Write the following style after the title tag and just before the head tag in your HTML file you just created.
What is it?
1. img in the above style is the selector there. It selects all the images in the HTML file and then assigns the styles written inside the brackets.
2. I have set width to 100%. i.e. no matter what ever might be the device width – the image should occupy the space available out there. Height is set to auto, so that we are leaving the browser to set the height proportionately to the width. So that we get accuracy 100%.
3. If there is only an Image in the whole website – then setting 100% will render the Image in very large size. Its not a kinda rendering problem – it is doing what I asked it to. Don’t worry – we can tackle the problem by writing media queries for larger screen resolution. And, we’ll need to set the width to lesser %. Might be around 50% or lesser according to the screen resolution.
All together the HTML file should contain the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive banner image</title>
<div> <img src="images/Responsive_banner_image.jpg" width="600" height="300" alt="Make Image responsive" /> </div>
Once you are done with the entire HTML file – run the HTML file in your favorite browser like Firefox or Chrome. However, it should be compatible on all Modern browsers.
Here are few of the screenshots when tested using “Responsive design view in Firefox“.
360X640 – Portrait orientation
640X360 – Landscape orientation
That’s it guys, you have done it – you have create your image to be responsive on mobile devices as well as on Desktop devices. You can implement the same technique on any of you website and feel the responsiveness of the image on mobile devices.
Thanks for coming along with the tutorial – Any suggestions or questions are welcomed. Please feel free to post it in the comment section below.