Cara buat gambar di dalam div penuh dalam posisi proporsional di css

Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat gambar di dalam div penuh dalam posisi proporsional di css.
Berikut ini syntaxnya.
-------------------------------------------------------
<style>
.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
}
</style>

<div class="fill">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUs3asA5YHwTnBHAjuaIv37cNeCE95RK_KIaWyfpK7lZNkylotRA_5q1FL8RwnXQkgcWqe_rsGxxGz40zxfCEhaknTVqxvrpw0hWGaj4knOfSEar9Xld6hdGQucIa3i4VEh1uVc4s6HkQv/s640/Screenshot_13.png" class="img-responsiv" alt="preview12-explore-images">
</div>


berikut ini gambar asli :

hasil :

tutorial ini berlaku untuk gambar ukuran potrait maupun landscape dengan ukuran fill bisa sobat tentukan sesuai kebutuhan.
-------------------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/