how to adjust the height and width of an image using in a modal content?

I am working on laravel 5.0. I am using the bootstrap feature i.e; modal.I just want to add an image in the modal content. I am getting the image but couldn't able to adjust the size of that image.Also,By using css, there is no effect on the image size.

My Code:

  @foreach($gallery->images as $image)
  <section id="gal" class="col-md-3">

<a class="col-md-3" href="" data-toggle="modal" 
data-target="#yourModal">
<img src=""></a>

</section>
@endforeach

 @foreach($gallery->images as $image)
 <div class="modal fade" id="yourModal" 
 tabindex="-1"   role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="dialog">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" 
   aria-label="Close">&times;</button>

  </div>
  <div id="modalimage1" class="modal-body">
    <img id="modalimage" src="">
  </div>
  <div class="modal-footer">
  <div class="row">
   <section class="col-md-offset-1 col-md-2">
   <img  id="jumboimage" src="/src/images/g.jpg"/>
    </section>
  </div>
  </div>
 </div>
 </div>
 </div>

My CSS:

   #modalimage{
     width:20px;
     height:20px;
      } 


   #jumboimage{
     width:10px;
     height:15px;
      } 

via Chebli Mohamed