Is there an img (javascript) equivalent for background: cover?

Question

I am working on a flexible design that shows photos in a grid. Photos themselves can be in all proportions and sizes. In addition, the grid cells in which they are placed also do not have a fixed width; they scale when the browser is resized. In addition, each grid cell, although dynamic in width and height, has the same size, regardless of the image inside it.

To correctly show photos in this very dynamic situation, I found a working recipe: each photo is basically a div with the image set as the background image. To correctly scale the unknown width / height of an image inside a dynamic-sized grid, I use the CSS3 background-size: cover function.

The end result is fabulous, it does exactly what I want in terms of user interface and display. However, I am not happy with the reduced availability of this solution: it is not optimized for SEO and does not support the plugin (think about social plugins). So I'm trying to reproduce the working situation that I have, but this time using the good old img tags instead of CSS backgrounds.

I know that there is IE8 and lower polyfills for background-size: cover, but I'm not looking for this, I'm looking for a solution based on img tags. I also found articles using absolute positioning methods, as well as CSS clip properties, but I don’t remember anything about the fact that my design is absolute in size.

I suppose I'm looking for a Javascript subroutine that has background size logic: a cover for dynamic measurement, in a situation where both the source (image size) and target (display field) are dynamic in size.

Is there such a javascript equivalent for the background: a cover that works with img tags?

Answer 1

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

Instead of making 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 the div containing the width / height value that is required for the image. Then put the image inside at 100% width / height and set src to the desired img. Also set the img you want as the img background image. Set the background size for the coverage, and the fill to 50%.

The trick is 50% indentation. The width / height of the img is fixed, as you increase the fill, the image becomes smaller and smaller. 50% is exactly how much it needs to be hidden, and now you just see the background image of the image displayed the way you want, but it is still available!

http://jsfiddle.net/t72xgbw0/

Answer 2

Thinking about accessibility and SEO, I created a solution to a very similar problem using jQuery, it does not reproduce the background cover logic, it uses it.

Images actually become the role of a container with a background, and the background cover is added programmatically.

 $imagesContainer.find('img').each(function(i, elem){ $(elem).css({ backgroundSize : 'cover', backgroundImage : 'url("' + $(elem).attr('src') + '")', backgroundPosition : 'center', display : 'block', height : '100%', // Or any size needed. width : '100%' }); $(elem).removeAttr('src'); }); 

Answer 3

I found a good way to cover the container with an image using css and javascript:

HTML:

 <div class="container"> <img src="image.jpg"/> </div> 

CSS

 img { position: absolute; min-width: 100%; // To cover container min-height: 100%; // To cover container top: 50%; // To move image corner to center of container left: 50%; // To move image corner to center of container } 

JavaScript:

 $('img').css({ 'margin-top': -$('img').height()/2, // To move to center of image 'margin-left': -$('img').width()/2 // To move to center of image }); 

Be sure to run javascript after loading the image.

Answer 4

I believe that you want to do two things:

• Image fill window
• Make sure the image is centered vertically and horizontally.

The problem (if you want to keep the aspect ratio of the image) is that you need how to center it vertically and horizontally depending on the size of the image and the browser.

You can make a clean CSS solution using a combination of display:table and margin:0 auto , as well as smart height and width settings.

See the script: http://jsfiddle.net/5yVYM/3/

 .wrapper { display:table; text-align: center; margin:0 auto; width:100%; height:100%; } .wrapper div { display:table-cell; vertical-align:middle; max-width:100%; max-height:100%; } img { width:100%; height:auto; }