css在列表中显示所有相同大小的图像

Question

我试着把这个html：

<ol>
    <li><span><img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" width="10ex" height="1em"/></span>Something</li>
    <li><span><img src="http://www.smallbusinessfriends.com/wp-content/uploads/2011/05/cms.jpg" width="10ex" height="1em"/></span>Another thing</li>
</ol>

Demo

当我放置一个较小的图像时它显示正常，但是当我尝试放大图像时它不起作用？ 为什么这样 ？ 我该如何解决这个问题？

Answer 1

在你的css中：

img { max-height: 15px; }

这样的事情？或者如果您愿意：

li img { max-height: 15px; }

如果您定位较旧的浏览器，则应使用height而不是max-height。

正如Rikudo所说，ypu可以使用1em的大小：）

Answer 2

您不应该在html中声明图像的大小，而是在CSS中声明。

<强> See this Example

span img {
    width: 10px;
    height: 1em;
}

实际上，您甚至可以放弃<span>并让<img>改为display: inline-block;。