Fitting img inside div

Question

I have an div

which I keep box shaped all the time using:

div{
    float:left;
    width:  447px;
    height:     445px;
    background-color: blue;
}


div:after{
   content: "";
   display: block;
   padding-bottom:100%
}

the problem occurs when I want to add an image to the div

<div><img src="as.jpg"></div>

using:

img{
  width:100%;
  height:100%;
}

Does one of the two things:

the image does not cover whole div
the image does not cover whole div and box shape is ruined

Is there a way how to fix this? Demo

Why are you using padding-bottom: 100% in '.small:after'? – fdfey May 13 '16 at 11:19 — fdfey, May 13 '16 at 11:19
You mean like this - https://jsfiddle.net/ddbpd98c/2/ – Paulie_D May 13 '16 at 11:24 — Paulie_D, May 13 '16 at 11:24
@fdey so the div will keep box shaped every time. – Darlyn May 13 '16 at 12:02 — Darlyn, May 13 '16 at 12:02

Ani Menon · Answer 1 · 2016-05-13T11:31:23.193

Use the image as background-image.

Example :

div {
  display: block;
  width: 500px;
  height:500px;
  background: url('http://www.nasa.gov/sites/default/files/images/729223main_728322main_messenger_orbit_image20130218_2_full_full_full.jpg') no-repeat;
  background-size: contain;
}

<div>
</div>

If you would like to use bootstrap framework, its simpler.

Example (using Bootstrap):

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-3">
    <img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" class="img-responsive" style="padding-top: 5px">
  </div>
</div>

You may also do it the usual way, just set the height of the image.

Image in a div, with image height defined :

<div>
  <img src="http://images.all-free-download.com/images/wallpapers_large/love_wallpaper_vector_3d_wallpaper_261.jpg" alt="image" height="200px" />
</div>

the background-image works fine , but what if i want more divs with different images? Thats just mor classes. Is there a way using img inside? That would also work for others element , in case i do not want to add just an image. — Darlyn, May 13 '16 at 11:59
@trolkura read through again. I have given three solutions. Use the third one(__with image height defined__) if you just want img in div. — Ani Menon, May 13 '16 at 13:52

gdyrrahitis · Answer 2 · 2016-05-13T11:38:21.873

That is happening because the parent element, hence the div.small hasn't its height explicitly set.

For elements height is auto by default, meaning every element has height equal its contents. Contents of an element determine its height.

For an element to have height: 100%, hence to use percentage to fit in container's height, you should determine the height of the parent in absolute value.

Try this:

Try set for example height:400px; to div.small and height: 100%; for the image. Then the image will fit its container.

Check the fiddle here.

Update

Also, please check this tutorial by lynda.com, as it provides an explanation about elements height. A bit old, but very good stuff.

Fitting img inside div

2 Answers2