How to make images responsive

I spent WAY too much time trying to figure this out when there is a MUCH simpler method. The answer?! Put the freaken images into a DIV container and then wrap the image. But i'm going to show other examples because they are both useful depending upon what you need for your site...

Option #1 using a div container and wrapper

This would be your original image which is unresponsive:
(I have mine centered)

Example of responsive image using a DIV and wrapper:

Think of the container as a gift. It just a gift right? Now think of the wrapper as you're going to wrap the gift so it fits on all screens and devices.

HTML:

CSS:

THESE PROPERTIES ARE IMPORTANT

max-width: 500px;
this will be the max-width you allow for your image (you can change this to whatever you would like as well)

display: block;
margin-left: auto;
margin-right: auto;
these will allow you to center your image, if you don't want it centered do not include this in your code.

object-fit: cover;
this will allow the image to cover the area you designate

width: 100%;
this is the width of the image you want responsive which you can change

height: 100%;
this is the height of the image you want responsive which you can also change

Option #2 using % width and auto height

In these two examples there is 30% width and 80% width. (I added borders but feel free to remove them) You can change the width to whatever width you would like your image, and the height will scale itself on auto to fit the new dimmensions. If you don't want the images centered just remove "display: block; margin-left: auto; margin-right: auto;." Also I named the img class ex2 and ex3 just for demonstration purposes you can rename it to whatever you'd like and of course change it to the image you want =p

• resize the browser to see the effects

This is 30% view width:

This is 80% view width:

HTML

CSS