Arkadaşlar şöyle bi html kodu var

<div class="container-fluid">
<div class="row">

<div class="col-md-12">
<a href="#">
<div class="bt-image"></div>
</a>
</div>


</div>
</div>

ve ona ait css

.bt-image {
background-image: url("../img/resim.jpg");background-size:cover;
width: 100%;
height: 620px;
opacity: 1;
transition: 0.5s;
}

.bt-image:hover {
background-image: url("../img/resim-hover.jpg");background-size:cover;
width: 100%;
height: 620px;
opacity: 1;
transition: 0.5s;
}

Buton olarak düşünün div üzerine geldiğimizde cssde yol verdiğimiz resim-hover.jpg çıkıyor.
resmi orantılı biçimde sayfaya altta üstten tam sığdıramadım kenarları kesmeden full width
width: 100%;
height: 100%;
yapıyorum sayfadan tamamen resim butonlar kayboluyor height: 620px; değeri verdiğimizde ise boyut sabit kalıyor haliyle sayfayı büyütüp küçülttükçe yanlardan kesme yapıyor?