wrap＆＃34; inline-block＆＃34; div图像

Question

我需要一个＆＃34;显示：inline-block;＆＃34; （不显示：阻止;）div像这样的图像：

`<div style="display:inline-block;"><img src="#" /></div>`

结果是div大于图像。我可以将它包裹在图像周围，使其具有相同的高度和宽度吗？ （没有设定尺寸）。

Answer 1

只需将vertical-align: top;添加到<img>

即可

<强> CSS

.wimg{
    display:inline-block;
}

img{
    vertical-align: top;
}

<强> DEMO HERE

Answer 2

额外的空白是由于CSS如何定位内容线框基线周围的元素。

如果您将display: block应用于图像，那么您将获得所需的缩小效果。

将vertical-align: {top|bottom}应用于图像的替代方法也有效。

div {
  display: inline-block;
  border: 1px dotted blue;
}
div img {
  display: block;
}

<div>
  <img src="http://placehold.it/200x100" />
</div>