CODEWITHSUNDEEP
htmlcss
ranel
ranel

Reputation: 129

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

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.

Upvotes: 8

Views: 7100

Answers (6)

Dmitriy
Dmitriy

Reputation: 4503

* {
    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>

Upvotes: 1

Vandervals
Vandervals

Reputation: 6054

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

Upvotes: 10

Doug
Doug

Reputation: 821

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.

Upvotes: 0

Jean
Jean

Reputation: 5411

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;
}

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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
}

Upvotes: 0

The Reason
The Reason

Reputation: 7973

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

Upvotes: 0

Related Questions