Что добавить чтобы изображение возвращалось в исходный размер не только по клик на крестик но также при клике на любое место за пределами изображения?

<div class="portfolio-container">
<div class="foto-container">
 <img class="foto-portfolio" src="http://dom.temp21.ua/images/_ads/original/12635_1.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="https://image.winudf.com/v2/image/Y29tLndhbGxwYXBlcnMuYWhkcGlfc2NyZWVuXzE1X3I1ZXd1NGZz/screen-15.jpg?fakeurl=1&type=.jpg" style="width:100%;max-width:300px">
</div>
<div class="foto-container">
 <img class="foto-portfolio" src="https://cdn2.outdoorphotographer.com/2018/12/figure-1.jpg" style="width:100%;max-width:300px">
</div>
</div>

.portfolio-container{
    margin-left:260px;
    margin-right:230px;
    
    
}
.foto-container{
    float:left;
    width:18%;
    margin:9px;
    height: auto;
    
}

.foto-portfolio{
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.foto-portfolio:hover {opacity: 0.7;}


.modal-portfolio {
  display: none; 
  position: fixed; 
  z-index: 100; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7);
}


.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var modal = document.getElementById('myModal');
var img = document.getElementsByClassName("foto-portfolio");

for( var i = 0; i < img.length; i++){
  img[i].addEventListener('click', function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  });
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
  modal.style.display = "none";
}