How can I make an image in a div responsive? - html

Question

What I want is for the image to scale down as the browser window scales. Would making it a background image be a better solution?
#home-feature5 {
height:618px;
width:1210px;
position:relative;
}
.photo {
bottom: 37px;
position: absolute;
z-index: 1;
left: 20px;
}
.photo img {
max-width:100%;
height:auto;
}
.bg {
background-color:#f88b5c;
width:100%;
height:95px;
bottom:0;
left:0;
position:absolute;
}
Fiddle: http://jsfiddle.net/9LLr7m6w/

Answer 1

I think you should make the whole site responsive:
#home-feature5 {
height:618px;
width:1210px;
position:relative;
max-width: 100%;
}
fiddle

Answer 2

Set the width attribute of the image as a percentage instead of fixing it. Doing so, it should be able to scale accordingly.
For example, let’s say you have an image that has a natural size of 1210px x 618px in a 1400px wide document. Below 1400px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (1210 / 1400 ) × 100 = 86.43%

Answer 3

When I want the image to scale down with the page I do something like this.
body{
width=100%;
}
#home-feature5 {
height:618px;
width:1210px; //might want to change this to a percentage
position:relative;
}
.photo {
position: absolute;
left: 20px;
width:50%; //the div will be 50% of its container (#home-feature5)
}
.photo img {
width:100%; // will be 100% of its container (.photo)
}
<!-- with html something like this -->
<div id="#home-feature5">
<div class="photo">
<img alt="whatever missing" src="whatever.png">
</div>
</div>