CODEWITHSUNDEEP
htmlcssimage
user2640633
user2640633

Reputation:

containing div wider than img

I have an img tag inside of a containing div and for some reason the containing div is wider than the img tag. I have used "width" with % as well as px and I have also tried giving the containing div 0 padding as well as the img inside 0 margin. I am trying to get the div to be the exact width of the img tag.

Here is an example of the html 

   <div class="ballOne">
        <img src="assets/fitnessIcon.png" alt="Fitness Icon" />
    </div>

and the css 

.ballOne{
border: 1px solid blue; 
width: 200px;
float: left;
padding: 0;
}
.ballOne img{
width: 60%;
border: 1px solid green;
margin: 0;
}

the borders are only temporary to show me the width of the div and the img

Upvotes: 0

Views: 1432

Answers (5)

Jayesh
Jayesh

Reputation: 101

I think that I fixed your CSS:

.ballOne {
    border: 1px solid blue; 
    width: 200px;
    float: left;
    padding: 0;
}
.ballOne img {
    width: 200px;
    border: 1px solid green;
    margin: 0;
}

Upvotes: 0

Gunaseelan
Gunaseelan

Reputation: 2542

Without Using width for div and img

HTML: 

<div class="ballOne">
    <img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg" alt="Fitness Icon" />
</div>

CSS:

.ballOne{
       border: 1px solid blue; 
       float: left;
       padding: 0;
       text-align: center;
       overflow:auto;
  }
 .ballOne img{
       border: 1px solid green;
       margin: 0;
       display: block;
  }

Check out this FIDDLE

Using width for div

HTML:

<div class="ballOne">
        <img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg" alt="Fitness Icon" />
</div>

CSS:

.ballOne{
   border: 1px solid blue; 
   float: left;
   width:200px; 
   margin:0 auto; 
   padding: 0;
   text-align: center;
   overflow:auto;
}
.ballOne img{
    border: 1px solid green;
    margin: 0;
    width:99%;
    display: block;
}

Check out this modified FIDDLE

Upvotes: 1

sanoj lawrence
sanoj lawrence

Reputation: 1003

As you said <div> is bigger than <img> that's because you made <img> width to 60% so image width will cover only 60% rest 40% will be blank

Answer

so simple add image width:100% 

 .ballOne{
    border: 1px solid blue; 
    width: 200px;
    float: left;
    padding: 0;
    }
    .ballOne img{
    width: 100%;
    border: 1px solid green;
    margin: 0;
    }
     <div class="ballOne">
            <img src="assets/fitnessIcon.png" alt="Fitness Icon" />
        </div>

Upvotes: 0

adrian_reimer
adrian_reimer

Reputation: 469

the reason the container is wider than the image is because you are setting a defined with for the container, in this case 200px, and then setting the style for the img tag to be 60% of its containers width. In other words, your img tag is 60% the width of 200px.

you could try something like this:

.ballOne{
border: 1px solid blue;
width: 200px;    /* alternatively, you could not set the width of the container at all */
float: left;
padding: 0; 
}
.ballOne img{
max-width: 100%;    /* this allows the img tag to be the full size of its container */
border: 1px solid green;
margin: 0;
}

Upvotes: 0

Homberto
Homberto

Reputation: 165

With ballOne as a container with width:200px;, and the image inside with width:60%;, the image will be 60% the width of the container. So the image will be 60% of 200px or ~120px.

If you want the widths to be the same, set them to the same widths, in px.

.ballOne{
border: 1px solid blue; 
width: 200px;
float: left;
padding: 0;
}
.ballOne img{
width: 200px;
border: 1px solid green;
margin: 0;
}

Upvotes: 0

Related Questions