bootstrap resizing images dynamically

I use <IMG class="img-responsive" src="image file" border="0">

****
I have presently this code round my FN (image) field on my Image List page.
<DIV class="bs-horizontal-value col-md-8 {$FN_class}" {$FN_style}>

{$FN_value}

</DIV>
I changed the above to
<DIV>

<IMG class="img-responsive" src="{$FN_value}">

</DIV>
and added to the 'style' page in custom CSS
.img-responsive {

height: auto;

width: 100%;

}
but to no success. The image appears but it is not reacting responsively.
Where must I make the changes in order to have my image field "FN" react responsive? In Image List page on the HTML view ? in a Event ? ...?
Any guidance is welcome.

To clarify: I have a Image List page with standard (phprunner) bootstrap theme.
This below code is working fine (responsive" whenreference is made to a specific image with a relative path like
<DIV>

<IMG class="img-responsive" src=" imagesource/mypicture.jpg">

</DIV>
and added to the 'style' page in custom CSS

.img-responsive {

height: auto;

width: 100%;

}
But the below code is not working responsive" if reference is made to fieldname {$FN_value} as

<DIV>

<IMG class="img-responsive" src=" {$FN_value}">

</DIV>
Anyone who could help me with the right coding?