Comment rendre des images responsive dans un même format?

Comment rendre des images responsive dans un même format?

1 - dans du style, créer les classes.

figure:hover {
background: white;
cursor: pointer;
-webkit-box-shadow: 0px 2px 5px 4px rgba(255,255,255,1);
-moz-box-shadow: 0px 2px 5px 4px rgba(255,255,255,1);
box-shadow: 0px 2px 5px 4px rgba(255,255,255,1);
border: 2px solid black;
}

figure img {
   width: 200px;
   position: relative;
   vertical-align: middle;
height: 200px;
}

figure:hover img {
padding-right:0px;
opacity: 1;
transform: scale(1.3);
}
</style>

***************************************************

2 - Créer un container.

*******************************************************

3 - Créer les blocs images.

<figure>
<a data-toggle="modal" data-target="#SupportModal">
<h2 id="title"><span class="icon-holder"><i class="c-brown-500 ti-headphone"></i> </span>Support</h2>

</figure>
</a>

****************************************************

4 - option: créer un bouton avec un bloc modal.

<div class="modal fade" id="FAQModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                           <div class="modal-dialog" role="document">
   <div class="modal-content">
       <div class="modal-header">
<h2 class="modal-title" id=""><span class="icon-holder"><i class="c-brown-500 ti-support"></i> </span>FAQ</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
       </div>
****************************************************
ne pas oublier de fermer le div container et les autres div concernées.
exemple: