Как поместить изображение в ячейку таблицы td
? [Чистый HTML]
Я пробовал использовать приведенный ниже код для размещения изображения в ячейке таблицы td
.
HTML код находится здесь:
<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0">
<tr>
<td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td>
</tr>
</table>
Как вы можете видеть на следующем скриншоте и в [JsFiddle DEMO][1], изображение не помещается в ячейку td
.
Снимок
Что я делаю не так?
Любое предложение было бы замечательным.
При инлайн-содержании внизу остается место для опускающихся символов (j, y, q):
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
Есть несколько исправлений:
Используйте display: block;
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
или используйте vertical-align: bottom;
.
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
Все дело в display: block
:)
Обновлено:
Итак, у вас есть теги table, tr и td:
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
Допустим, ваша table
или td
(что бы ни определяло вашу ширину) имеет свойство width: 360px;
. Теперь, когда вы попытаетесь заменить html-комментарий реальным изображением и установить свойство изображения, например, width: 100%;
, которое должно полностью заполнить ячейку td
, вы столкнетесь с проблемой.
Проблема заключается в том, что ячейка таблицы (td
) не заполнена изображением должным образом. Вы заметите пространство в нижней части ячейки, которое ваше изображение не покрывает (это примерно 5px padding).
**Как решить эту проблему самым простым способом?
Вы работаете с таблицами, верно? Вам просто нужно добавить свойство display к вашему изображению, чтобы оно имело следующее значение:
img {
width: 100%;
display: block;
}