responsive images inside a full width div

[Tait]

I have this markup: \[code\]<div class="girls" style="text-align:center; margin-top:100px"> <img src="http://stackoverflow.com/questions/15822493/images/1.png" /> <img src="http://stackoverflow.com/questions/15822493/images/2.png" /> <img src="http://stackoverflow.com/questions/15822493/images/3.png" /> <img src="http://stackoverflow.com/questions/15822493/images/4.png" />\[/code\]and this css (I'm using Twitter Bootstrap) :\[code\]img { height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;\[/code\]}The images have equal width and height and are displayed inline. On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)I've found this picturefillWhich I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution. Thanks!