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>

Демо

Когда я помещаю меньшее изображение, оно показывает хорошо, но когда я пытаюсь поставить большее изображениеэто не работает?Почему так ?И как я могу это исправить?

Answer 1

В вашем css:

img { max-height: 15px; }

как то так? или, если вы предпочитаете:

li img { max-height: 15px; }

если вы ориентируетесь на старые браузеры, вы должны использовать height вместо max-height.

Как сказал Рикудо, ypu может использовать 1em для размера:)

Answer 2

Вы не должны объявлять размеры для изображения в HTML, а в CSS.

См. Этот пример

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

На самом деле, вы даже можете сбросить <span>, и вместо него <img> будет display: inline-block;.