how to fit an image in footer - css

Question

i want to put an image in footer (jquery mobile),
how to make that image fit to width of footer (different width of smartphone)
Here is my code :
<div data-role="footer" data-position="fixed">
<div class="adsspace"><img id="myads" src="ads.gif"></div>
</div>
Here is my css example
#media only screen and (max-device-width:767px){
.adsspace{
width:767px;
height:50px;
}
.adsspace div, .adsspace img {
position:relative;
max-width: 767px;
max-height: 50px;
}
}
my ads.gif has width and height : 1200 * 180 px
thank you

Answer 1

You may try with:
.adsspace {
width:100vw;
}
It will grant the image width always adapt to the browser's width. However, you must take into account that the image height will increase as well. If you need to work with fixed dimensions, you can try with the object-fit rule, like that:
#myads {
width:1200px;
height:50px;
object-fit: fill;
}
And then you'll need to apply it as well in the media queries, specifying the new dimensions.
In case the original dimensions of the image file don't match exactly with the footer proportions, then the image will appear distorted. In that case object-fit: cover could be more suitable:
#myads {
width:1200px;
height:50px;
object-fit: cover;
}
I hope it helps!

Answer 2

#media only screen and (max-device-width:767px){
.adsspace{
width:100%;
height:100%;
}
.adsspace div, .adsspace img {
position:relative;
}
}
<div data-role="footer" data-position="fixed">
<div class="adsspace"><img id="myads" src="http://1.bp.blogspot.com/-GQ4s4jpyCOE/T4Zi23RtGFI/AAAAAAAAAr8/tdnhfESXJRM/s320/google+giant+face.png"></div>
</div>