Is There an Equivalent to Background-Size: Cover and Contain For Image Elements

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

How to emulate background-size: cover on img?

this may be easier

jQuery

$('.box').each(function() {
    //set size
    var th = $(this).height(),//box height
        tw = $(this).width(),//box width
        im = $(this).children('img'),//image
        ih = im.height(),//inital image height
        iw = im.width();//initial image width
    if (ih>iw) {//if portrait
        im.addClass('ww').removeClass('wh');//set width 100%
    } else {//if landscape
        im.addClass('wh').removeClass('ww');//set height 100%
    }
    //set offset
    var nh = im.height(),//new image height
        nw = im.width(),//new image width
        hd = (nh-th)/2,//half dif img/box height
        wd = (nw-tw)/2;//half dif img/box width
    if (nh<nw) {//if portrait
        im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
    } else {//if landscape
        im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
    }
});

css

.box{height:100px;width:100px;overflow:hidden}
.wh{height:100%!important}
.ww{width:100%!important}

This should handle any size/orientation, and will not only resize, but offset the images. All without relative or absolute positioning.

made a fiddle: http://jsfiddle.net/filever10/W8aLN/

What is the difference between background-size: cover; and background-size: 100%;?

cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.

If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.

Your Question: Why would they looks the same ?

Answer: If the image / container are square

See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example

Is there anyway to set background-size to both contain and cover?

By setting the background size to cover you are giving the browser the prerogative to adjust the image until it completely covers the area; it will ignore width and height values you assign.

With contain you allow the browser to decide how to adjust the image so that the entire image fits within the area, which may be based on height or width to accomplish this (depending on the orientation of the image wide or tall).

background-size: 100% 100% is probably what you're looking for, but that will disproportionately adjust the image (ie: stretch or compress depending on orientation). However, it does sound like that's what you want when you say "both cover and contain".

There are many ways to place and scale images used as backgrounds (where background does not necessarily mean the CSS background property)

Below is a simplified example of how I've accomplished this (assuming images that are roughly 700x300 px)

.container-wrap {
     width:100%;
     }
 .container {
     position:relative;
     padding:42.86% 0 0 0;
     /* where padding = the proportion of the images width and height
     which you can get by division: height / width = 0.42857 */
     }
 .container img {
     position:absolute;
     top:0px;
     right:0px;
     bottom:0px;
     left:0px;
     }

it is important that your images maintain a close proportion to each other -- if they are slightly off, the slight distortion shouldn't be visible to most people for most images

Again, there are other methods to accomplish this. The website you linked to applies a similar concept. The concept is the same, method is slightly different (for example they are using width:100% on the images instead of absolutely positioning them), where the concept = "using some sort of method to proportion the images to the container so it will magically scale"

Note that the same method can be applied to video containers (such as from YouTube).

Why does background-size contain not work on HTML or BODY if height is not defined, but background-size cover works?

The reason is that in both cases the html element (and the body) element has height equal to 0 and a width equal to screen width.

Contain always consider the smallest dimension while cover always consider the biggest one.

let's take an example with a classic element to see what is happening:

.box {
  height: 5px;
  border: 1px solid;
  margin:5px;  background:url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg) center no-repeat
}

<div class="box" style="background-size:contain"></div>
<div class="box" style="background-size:cover"></div>

.product img {
  max-width: 200px;
  max-height:200px;
  width:auto;
  height:auto;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}