CSS, Web Development

Responsive images via background-size

As I was doing some image uploading work on a project recently I decided to understand, truly, if, for image post-processing, I should resize and cut corners off to keep ratio or thumbnail and keep the independent size of the image, but risk making it difficult to put into the page.

As an example, I have an image of 700px x 418px. I have a choice between cutting it down to 400px x 400px, cutting off 300px or bringing it down to about 400px x 238px and make it more difficult to add to a Bootstrap powered gallery.

So, I looked at what Facebook did here and I noticed they actually use the 400×238 image as a background image and then used background-size:cover to fix any problems. Fortunately, despite what caniuse.com (http://caniuse.com/#feat=background-img-opts) says, background-size is supported in IE8 (I actually got a Windows 7 VM with IE8 on it from modern.ie and tested it) but, with no content, the media queries for resizing the columns could not function right.

So I need something to tell both IE8 and later browsers how to size this image.

The CSS solution at this link works perfect: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images

In short, here is the post summarised:

<div style="width: 400px">
    <span id="image">
        <span id="image-inner">
        </span>
    </span>
</div>

#image {
    display: inline-block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(image.jpg); 
}


#image-inner {
    display: block;
    height: 0;
    padding-top: 63.3%;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s