流体图像，调整窗口大小

<style type="text/css" scoped>
                            @media(min-width: 640px){
                                .<?php echo $champion[$i];?>{
                                background-image: url('<?php if($summary!=1){echo 'assets/champions/'.$champion[$i];}else{echo '../../../assets/champions/'.$champion[$i];} ?>_pc.jpg');

                                }
                            }
                            @media(max-width: 639px){
                                .<?php echo $champion[$i]; ?>{
                                background-image: url('<?php if($summary!=1){echo 'assets/champions/'.$champion[$i];}else{echo '../../../assets/champions/'.$champion[$i];} ?>_mobile.jpg');

                                }
                            }

http://i.imgur.com/qSlAfDF.png http://i.imgur.com/iAEJRNk.png

Above are pictures showing the problem I'm curious what's the best way to make this responsive and not look crappy after resizing. I thought about cropping in 3rd software from splash art the way that champion's face would be in the middle so it will always be visible.enter code here