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?
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
Post a Comment