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

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>

Answer 3

You should use
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
.container {
width: 700px;
height: 400px;
background: #444;
margin: 0 auto;
border: solid black 1px;
}
.container img{
width: 100%;
height: 100%;
}
Fiddle Here

Answer 4

Try this:
.icondiv{
border:1px solid;
background: url(yourimage.png) no-repeat center center;
background-size: cover;
width: 200px; // Adjust your needs
height: 200px; // Adjust your needs
}

Answer 5

You could create some css class like this:
full {
background-image: url(image_path('yourimage.jpg'));
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}

Answer 6

It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.
.container {
width: 700px;
height: 400px;
background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
background-size:cover;
margin: 0 auto;
border: solid black 1px;
}
<div class="container">
</div>
The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.