CSS zom på billede hvis det er for stort

Hej, udvikleren

Jeg er igång med at lave et billede blok med noget tekst i, det virker super fint. Men jeg har det problem at min blok har width:300 og height:400 og det er ikke alle billeder, primært de helt store der bliver placeret rigtigt, fordi de blive krumpet sammen så det ikke ser helt så flot ud.

Er det en måde man kan zoome ind på billedet så i stedet for det bliver strukket sammen, at det derimod bliver zoome ind på?

Kode:

 <div class="col-md-4"> 
         <div style="overflow: hidden;" class="xe-widget xe-single-news"> 
             <div class="xe-image"> 
             <img style="height:400px;overflow: hidden;"  src="BILLEDE" class="img-responsive" /> 
             
             <span class="xe-gradient"></span> 
             
             </div> 
             <div class="xe-details"> 
             <div class="category"> <a href="#">News</a> </div> 
             <h3> <a href="#">text</a> </h3> <time>I dag</time>
             </div>
         </div>
     </div>