Resize picture for adaptive and responsive designs. JavaScript function works on the fly.

resizeImg.js

<script>

function resizeImg(){
$( ".slides li img" ).each(function( index, element ){
    $( element ).removeAttr("width")
           .removeAttr("height")
		   .removeAttr("margin-top")
		   .removeAttr("margin-left")
           .css({ width: "", height: "", "margin-top": "", "margin-left": ""  });

    var height = $( element ).height();
	var width  = $( element ).width();
	var iw     = $("#center").width();

	if ($(window).height() - height > 0){	  	  
	  $( element ).css("width", width + "px");
	  if (iw - width > 0)
        $( element ).css("margin-left", (iw - width)/2+  "px"); 
      else if (iw - width < 0){
	    // она слишком широкая...
		height = height * iw/width;
        width = iw;
        $( element ).css("width", width + "px");
		$( element ).css("height",height+ "px");        
	  }
	  $( element ).css("margin-top",(($(window).height() - height ) / 2) + $(window).scrollTop() +  "px");     
	}else{	 
	   width = width * $(window).height()/height;
       $( element ).css("height", $(window).height()+ "px");
	   $( element ).css("width", width + "px");
	   if (iw - width > 0)
         $( element ).css("margin-left", (iw - width)/2+  "px"); 
	 else if (iw - width < 0){
	    // она слишком широкая...
		height = height * iw/width;
        width = iw;
        $( element ).css("width", width + "px");
		//$( element ).css("height",height+ "px");
		$( element ).css("height","auto");
$( element ).css("margin-top",(($(window).height() - $(element).height()) / 2) /*+ $(window).scrollTop()*/ +  "px");
	  }
	  
	}
  });

}


$( window ).resize(function() {
 resizeImg();
});


$( document ).ready(function() {    
	//resizeImg();

    $('.flexslider').flexslider({
      animation: "slide",
	  controlNav: false,
	  start: function(){resizeImg()}
    });  


});

</script>