html - how to make banner responsive and scale properly - by not using background property -

is there way can make banner responsive , image scale properly..i.e height remains same following structure

<div class="banner">     <img src="/img/banner1.png" alt="banner"> </div> 

i know css can make image background image class banner. possible have effect of

background-position, background-size 

with above structure.

remove img try add css .banner :

.banner {      background-image: url('/img/banner1.png');     background-repeat: no-repeat;     background-position: center;      background-size: cover; }