Question

Lets say that we have an image uploaded by the user, the upload script limits the mb but not the image size (so could be any proportion, 600X200,200X350, and so…).

Im already showing this image in one part on my site using the twitter bootstrap image handler written on css, thats good for a profile picture, the problem is that now I want that image to be a cover (like facebook/twitter cover image), my site is responsive so the width of the cover is 900px or 100% if the screen resolution is less than 900px wide. The height is always fixed to 200px. So I know there is a way to control the correct image display using CSS (maybe with jquery too) but Im not a front-end dev, Im a php dev and I dont want to use server side scripts for doing this. So im looking for suggestions or pieces of codes (css, javascript) to start with, I belive that it have to be an already made solution for this, but I dont find any on google. Thanks for any advice!

Answer 1

I would definitely not advise to use a css-only solution. Not even a client-side solution if the uploaded pictures can have any resolution. You want to use a php script to save resized versions of the uploaded images and serve those to the client. Either as a block’s background-image and use css (not cross browser) or as an img tag and use js to resize.

css:

.myselector{
    background-size: cover;
} 

or js (jquery):

$(function(){
    var containers = $('.myselector'), w = $(window);
    function onResize(){
        //resize code
        containers.each(function(){
            var $this = $(this),
                w = $this.width(),
                h = $this.height(),
                ratio = w/h,
                $img = $('img',$this); // assuming there is only one img in each container
            $img.css({'width':'auto','height':'auto'});
            var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
            if(iratio>ratio){
                $img.css({
                    height:'100%',
                    width:'auto',
                    marginLeft: (w-iw*(h/ih))/2
                });
            }
            else{
                $img.css({
                    width:'100%',
                    height:'auto',,
                    marginTop: (h-ih*(w/iw))/2
                });
            }
        });
    }
    w.bind('resize',onResize);
    //resize on each image load event
    $('img',containers).bind('load',onResize);
    onResize();
});

Here is a working fiddle : http://jsfiddle.net/kHxd2/2/

The image’s onload listener might need tweeking to react when cached images are rendered in IE: http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

Also you might want to set css rules for rare non-js browsers… (.myselector img{width:100%;})

EDIT : container css:

.myselector{
    width: 100%;
    max-width: 900px;
    height: 200px;
    margin: auto; /* centering */
    overflow: hidden;
}

see updated fiddle: http://jsfiddle.net/kHxd2/3/

The best solution is to embed the image containers in a main wrapper div and apply the above css rules to that big container.

Here is some useful code to take care of server-side resizing : http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html