<div class="imgcontainer img1"><img src="http://www.pmob.co.uk/temp2/images/fixed-a04.jpg" width="845" height="1193"  alt="gate"> </div>
<div class="imgcontainer img2"><img src="http://www.pmob.co.uk/temp2/images/a1.jpg" width="1000" height="722"  alt="a1"> </div>
<p>Following text</p>

.imgcontainer {
  width: 40%;
  display: inline-block;
  position: relative;
  background: red; /* for testing*/
}
.imgcontainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.img1 {
  padding-top: calc(40% * (1193 / 845));
} /* container's size times image aspect ratio. i.e. height divided by width */
.img2 {
  padding-top: calc(40% * (722 / 1000));
} /* container's size times image aspect ratio*/