how to make an image inside div fill the entire div?

Question

Currently I'm using this code:

<style type="text/css">
   .icondiv{
      border:1px solid;
      content: url(image.png) 100% 100%;
   }
</style>

<div class="icondiv"></div>

The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.

Answer 1

If you don't want to use background image

.container{
  width: 400px;
  height: 100px;
}
.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

<div class="container">
  <img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>

But pay attention to the support: http://caniuse.com/#search=object-fit

Answer 2

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.icondiv {
    width: 400px;
    height: 100px;
    border: 1px solid #f00;
    position: relative;
}
.icondiv img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<div class="icondiv">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>