Universal Solution for Responsive Image
Regardless of the actual size of the image displayed on the website, if the image size is re-adjusted according to the size of the device - i.e. mobile or computer screen, and it does not go off the screen - then it is a responsive image.
Live Preview
HTML Code (You can use any of these 3 html codes.)
<img src="nature.jpg" alt="TYPE HERE" class="responsive">
<p align="center"><img border="0" alt="TYPE HERE" class="responsive" src="image_name.png"></p>
<div style="text-align: center;"><img border="0" alt="TYPE HERE" class="responsive" src="image_name.png" /></div>
CSS Code
<style>
.responsive {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
</style>
What does this code do?
- Image never exceeds container width, it may be main content area, or sidebar, or a hero image.
- Small images keep original size.
- Aspect ratio preserved.
- WordPress, Joomla. Drupal, Blogger, plain HTML etc.
| Image | Container | Result |
|---|---|---|
| 300px | 800px | 300px |
| 1200px | 800px | 800px |
Another CSS Code
If you have a big size image, but you want to show in a small space, then you need to declare maximum width and height.
<style>
.responsive-small {
width:auto;
max-width:100px;
height:auto;
max-height:100px;
}
</style>
