Is there an img (javascript) equivalent to background-size:cover?

Question

I'm working on a responsive design that showcases photos in a grid. The photos themselves can be in all aspect ratios and sizes. Furthermore, the grid cells in which they are placed are also not of a fixed width, they scale as you resize the browser. Further, each grid cell, although dynamic in width and height, is of the same size, regardless of the image inside it.

To properly show photos in this highly dynamic situation, I have found a working recipe: each photo is basically a div with the image set as the background image. To properly scale the unknown width/height of the image inside a dynamically sized grid, I'm making use of CSS3's background-size:cover feature.

The end result is fabulous, it does exactly what I want in terms of UI and display. Still, I'm not pleased with the reduced accessibility of this solution: it's not SEO friendly and not plugin friendly (think of social plugins). Therefore, I'm trying to reproduce the working situation I have but this time using good old img tags instead of CSS backgrounds.

I know there are IE8 and below polyfills for background-size:cover, but I'm not looking for that, I'm looking for a solution based on img tags. I also found articles using absolute positioning techniques as well as CSS's clip property, but keep in mind nothing about my design is absolute in size.

I guess what I'm looking for is a javascript routine that has the logic of background-size:cover for dynamic sizing, in a situation where both the source (image dimensions) and target (display box) are dynamic in size.

Is there such a javascript equivalent to background-size:cover that works on img tags?

Answer 1

This is old, but I recently found a novel solution.

Instead of making the img you want to display the background image of a div, create an image:

<div>
    <img src="mypic.jpg"/>
</div>
<style>
    div {
        width:200px;
        height:200px;
    }
    img {
        box-sizing:border-box;
        width:100%;
        height:100%;
        background: url(mypic.jpg) no-repeat center center;
        background-size:cover;
        padding:50%;
    }
</style>

Set a containing div to be the width/height you want the image. Then put the image inside as 100% width/height and set the src to the img you want. Also set the img you want as the background image of the img. Set the background-size to cover, and the padding at 50%.

The trick is the padding at 50%. The img width/height is fixed, so as you increase the padding, the image gets smaller and smaller. 50% is exactly how much is needed for it to be hidden, and now you just see the background image of the image displayed how you want, but it's still accessible!

http://jsfiddle.net/t72xgbw0/