CSS: How to scale an <img> to cover entire parent <div>? [duplicate]

Question

QUESTION:

http://jsfiddle.net/Log82brL/15/

The <img> isn't shrink wrapping as I would expect with min-width:100%

I'm trying to shrink the <img> until either height or width matches the container

Click anywhere in the <iframe> to toggle container shapes

Please try to edit the <img> CSS:

1) MAINTAIN ASPECT RATIO

2) COVER ENTIRE SURFACE AREA OF CONTAINER DIV

3) ONLY EDIT THE IMAGE

This centering approach looks kinda sketch but it's pretty robust

My question is specifically: scale an <img> to FILL (maintain aspect ratio but cover the entire surface) of parent <div> even as the parent <div> resizes

Maybe I could somehow use css flex box-layout or something? Maybe a transform?

ANSWER:

http://jsfiddle.net/Log82brL/17/

Set HTML source to transparent base64 pixel (credit CSS Tricks)

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /> 

Use CSS background property

#img {     width: 100%;     height: 100%;     background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;     background-size: cover; } 

Answer 1

http://jsfiddle.net/Log82brL/7/

#img {   width: 100%;   height: 100%;   object-fit: cover; } 

object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

Answer 2

If you don't want to touch the container, put the background on the <img>

#img {    background: url(imgpath) no-repeat center;   background-size: cover; }