javascript - CSS - 强制图像具有相同的跨度宽度和高度

Question

我在这样的跨度上放了一张图片:

 word_span.append('<a id="imagelink" href="'+ image.link +'" " target="_blank"><img  src="' + image.src +'" border="2px"    /></a>')

span元素的css代码是这样的:

span.m10 {

height:90px;
width:90px;

}

我需要做的是强制图像包含在跨度的维度中。我注意到图像没有以跨度的尺寸显示，而是保持原始尺寸的比例。它仅遵循跨度的宽度而不是高度。

为什么会发生这种情况？

提前谢谢你。

Answer 1

span 元素是 HTML 中的内联元素。您不能为内联元素指定宽度和高度。

话虽如此，您可以使 span 的行为像 inline-block 一样

.m10 {
    display: inline-block;
    width: 90px;
    height: 90px;
}

然后你告诉跨度内的图像使用可用的全宽

.m10 img {
    width: 100%;
}

您可能想考虑只让 span 显示为 block 元素。 IE 不支持内联元素显示为inline-block。不过，您也可以将 span 更改为 div 并节省一些时间。