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中的内联元素。您无法为内联元素指定宽度和高度。

话虽如此，你可以使跨度表现得像inline-block那样

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

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

.m10 img {
    width: 100%;
}

您可能需要考虑仅将span显示为block元素。 IE不支持显示为inline-block的内联元素。但是，您可以将span更改为div并节省一些时间。

Answer 2

您是否尝试在CSS中的图像上使用某些内容来限制图像仅为父级的100％宽度？如：

span.m10 > a > img{
 max-width: 100%;
 height: auto;
}

这意味着图像永远不会超出父容器

Answer 3

要更改图像比例，请使用span（div）的背景，如下所述

div
{
    background-image:url('image.gif');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

Answer 4

您必须让span display:block;使其行为像块容器一样。

试试这个

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

 #imagelink {
    display:block;
    width:100%;
    height:100%;
}

 .m10 img {
    width: 100%;
    height:100%;
}

<强> DEMO FIDDLE

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

4 个答案: