Databases
StackOverflow2013
Postsdbo
POIs there an img (javascript) equivalent to background-size:cover?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there an img (javascript) equivalent to background-size:cover?
    text
    copied!<p>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.</p> <p>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. </p> <p>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.</p> <p>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. </p> <p>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.</p> <p><strong>Is there such a javascript equivalent to background-size:cover that works on img tags?</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload