html - Responsive banner image -


i developing responsive website has large banner image spans edge edge. problem supposed static height regardless of screen size. when set image width:100% looks great in full size, start shrink screen image gets shorter width needs be. how can set image height appears never change , when screen size smaller image size zooms in , crops edges?

http://bit.ly/1qxmzir

html

<div id="hd-img">     <img src="http://72.52.242.20/~camacoll/wp-content/uploads/2014/05/inner-hd.jpg">  </div> 

css

#hd-img {     max-height: 352px; }  img {     width: 100%;     height: auto;     left: 100%;     margin-left: -200%;     position: relative; }  

one way this.

/* css */  #hd-img {     height: auto;     overflow: hidden; }  #hd-img img {     /* optional max width: 600px; */     display: block;     margin: 0 auto; } 

Comments

Popular posts from this blog

google api - Incomplete response from Gmail API threads.list -

Installing Android SQLite Asset Helper -

Qt Creator - Searching files with Locator including folder -