html - image height fix even in responsive without image stretching -

i want image height fix exact 300px in responsive screen without image stretching. while try object-fit: cover;and work want compatible latest browsers. please avoid stupid answers.

.container {         width:100%;         height:300px; }  .container img {         width:100%;         height:300px;         }   <div class="container">  <img src="images/bnr1.jpg" /> </div> 

i'd go for:

img{   max-width: 100%;   height: auto;  } 

or max-height: 300px if expect (portrait) pictures run on size.

if want sure nothing crosses on boundaries of container, can following:

.container{ height: 300px; overflow: hidden; }