Resize html image in Weebly to available space

I am creating a site using Weebly where I have images that are links to other pages. In order to show that the images are links, I have put them in as embedded html and used some code to change the opacity when the mouse is hovering over them. I then put a link around this.

I can't seem to get the code to go in here, so here is a jsbin of it

I don't know very much HTML, so I got most of this from google searches. This works , but it will only ever display the image at it's native resolution, and Weebly will only give the HTML box a certain amount of space depending on the screen size. I want two of these images to be next to each other on the site, and evenly resize to fill the whole horizontal space, maintaining the same aspect ratio. I have looked at how to do this (such as this) but I can't get any of it to work.

Solution

Try this css on your image11. Maybe your looking something like this one LiveOnFiddle

       .two_img {
    display: inline-flex;
    
  }
  
  .image11 {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
  border: 1px solid red; /*only for view both image are separete */
  }
  
  .image11:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
  }

<div class="two_img">
<a href="link">
 <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg">
</a>
<a href="link">
 <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg">
 </a>
</div>