Cara na verdade seu "grid" está com uns probleminhas. Como vc quer 3 linhas o correto seria 1 `row` com 3 `col-12`, sendo que a primeira e última com com 10% de altura e a `col` do meio com 80%. Então eu montei o grid assim e fiz as classes no style.

Depois vc precisa ajustar a imagem, ela deve ter 100% de largura e altura. E a propriedade object-fit: cover vai fazer com que a imagem sempre ocupe todo o espaço disponível, centralizada e sem deformar (ficando achatada na horizontal/vertical)...

[![inserir a descrição da imagem aqui][1]][1]

**Veja o código referente a imagem acima:**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .n1 {
        height: 10%;
    }
    .n2 {
        height: 80%;
    }
    [class^="col-"] {
        border: 1px solid red;
    }
    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

<!-- language: lang-html -->

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
     
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-12 n1">1</div>
            <div class="col-12 n2">
                <img id="fotoExpandida" class="" src="http://ap.imagensbrasil.org/images/imagens-lobos.jpg">
            </div>
            <div class="col-12 n1">3</div>
        </div>
    </div>

<!-- end snippet -->


  [1]: https://i.sstatic.net/88RJx.gif