Question

我是前端开发的新手。最近，我编写了如下代码：

＆＃13;

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

＆＃13;

图像的高度（logo.jpg）是80px，但div的高度是82px。为什么呢？

Answer 1

你可以像块一样显示图像来修复它，

<div>
    <img style="display:block" src='logo.jpg'>
</div>

Answer 2

<div style="height:your height; width:your witdh;">

 <img src='logo.jpg'>

</div>

要更改高度或宽度，您可以使用内联样式执行上述操作。或者给div一个类或给div一个id并在外部样式表中设置它。

Answer 3

您需要编写适当的CSS来实现此目的。

<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/

div的高度大于图像

3 个答案: