How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px?
I have created a test image with dimensions of 400px height and 1300px width. Take a look at the jsfiddle link below to see what I mean.
http://jsfiddle.net/z6fj8dtg/2/
<div id="wrapper">
<div id="codeback">
</div>
<div id="container">
<div class="nav">
</div>
<div id="wrap">
<div class="banner">
<img src="http://s12.postimg.org/vnsghsvf1/banner.png" >
</div><!-- END OF BANNER -->
</div>
</div><!-- END OF CONTAINER -->
body{
background-color:#272822;
padding:0;
margin:0;
}
#wrapper{
width:100%;
height:inherit;
}
#codeback{
width:100%;
height:100%;
background-image:url('capture.jpg');
background-repeat: no-repeat;
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
#container{
width:100%;
float:right;
}
.nav{
margin-top:200px;
width:80%;
max-width:1300px;
height:50px;
float:right;
background-color:black;
position:relative;
}
.fixedNav {
position:fixed;
margin:0;
width:80%;
right:0;
}
#wrap{
float:right;
width:80%;
max-width:1300px;
height:1500px;
background-color:white;
box-shadow: -1px -1px 35px lightblue;
}
.banner{
max-width:100%;
}
Currently, the image overflows to the right within the container. How can I ensure it adjusts responsively?