Robust way to display an image with one fixed dimension

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!

There are many solutions but could you post some existing html/css code plz? — Armel Larcier, Nov 10 '12 at 10:38

Armel Larcier · Accepted Answer · 2012-11-10T12:13:56.760

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

This seems very good! let me take a look, but how can I stop the width resize if the resolution is above 1000px wide? In other words, i want to stop resizing if the width of the image is 900px... — DomingoSL, Nov 10 '12 at 11:54
You just need to specify the containers width with css using width and max width. Editing answer — Armel Larcier, Nov 10 '12 at 12:10

score 0 · Answer 2 · answered Nov 10 '12 at 10:39

0

You have to put this image as background-image, and then use style:

background-image: url(url/to/your/image.png);
background-size: cover;

answered Nov 10 '12 at 10:39

LorDex

2,591
1
20
32

Is this css3, html5 or just old school? – DomingoSL Nov 10 '12 at 10:42
No, it's css3 property. For IE u can use this solution: [link](http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie) – LorDex Nov 10 '12 at 10:44
This seems to be a pretty and smart solution!, do you know how can I solve the problem of the div witdh size, 900px with resolution bigger than 1000px wide and 100% if the resolution is smaller than 900px ? with css too – DomingoSL Nov 10 '12 at 10:51

score 0 · Answer 3 · answered Nov 10 '12 at 10:39

There is a property in css3 called as background-size:cover; and background-size:contain;. You might want to use them to suit your needs.

contain

Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

cover

Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Robust way to display an image with one fixed dimension

3 Answers3