Css genişlik problemi

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?

    @media screen and(min-width:800px) {
        .bt-image {
           width: 100%;
           height: 100%;
        }
    }
    
    
        @media screen and(min-width:(1200px)) {
    
            html {
                font-size: 10;
            }
        }

Css sayfasının altına bu kodu ekleyerek kenarlardan kesilmeye engel olabilirsiniz.