4

I am a rookie for front-end development. Recently, I wrote codes like:

<div style="background-color:red">
        <img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>

The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?

Tirthraj Barot
  • 2,671
  • 2
  • 17
  • 33
Micheal_Song
  • 139
  • 2
  • 7
  • 1
    Possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Mohammad Usman Jun 29 '16 at 06:07
  • Div height is greater than image, because space around image is pushing div to have that height. Edit your image in photoshop, cut the space up and down image., and it will work! Good luck! – Teuta Koraqi Jun 29 '16 at 07:40

4 Answers4

12

You can show image like a block to fix that,

<div>
    <img style="display:block" src='logo.jpg'>
</div>
Nikola Kokotec
  • 181
  • 1
  • 5
0
<div style="height:your height; width:your witdh;">

 <img src='logo.jpg'>

</div>

To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.

kevin seda
  • 396
  • 1
  • 3
  • 16
0

You need to write proper css to achieve this.

<div class="wrap">
   <div class="box1">
    <img src="http://www.placekitten.com/500/500">
   </div>
</div>

.box1 {
 width:auto;
 height: auto;
 max-width: 600px;
 max-height: 300px;
 background-color:chocolate;
 padding:5px;
 display: inline-block;
}
.box1 img {
 vertical-align: top;
 max-width: inherit;
 max-height: inherit;
}
.wrap {
 border: 1px dotted gray;
 margin: 1.00em 0;
 text-align: center;
}

JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/

Nikhil Maheshwari
  • 2,198
  • 18
  • 25
  • 1
    Please write a short explanation so that the OP would understand better. Why use this class, etc. It would be really helpful for the OP since he has stated he's a rookie. – dariru Jun 29 '16 at 06:15
0
div
{
     line-height: 0;
     ... 
     img
     {
       ...
     }
}

Try: line-height: 0;

Denys Sokolov
  • 63
  • 3