Блог

Главная - Вопросы по программированию - Как я могу заставить изображения помещаться внутри ячейки таблицы в html?

Как я могу заставить изображения помещаться внутри ячейки таблицы в html?

#html

#HTML

Вопрос:

Я присвоил ячейке высоту и ширину 100, но изображения по-прежнему отображаются в полном размере, а не изменяются, чтобы поместиться внутри ячейки. Как я могу это исправить? Вот мой код

 <table style="width:100%; text-align:center">
<tr>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng- 
c-plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng- 
c-plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng- 
c-plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng- 
c-plus-plus-png-500_500.png"/></td>
</tr>
<tr>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng-c- plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng-c-plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng-c-plus-plus-png-500_500.png"/></td>
<td style="width: 100; height:100"><img src="images/c-plus-plus-logopng-c-plus-plus-png-500_500.png"/></td>
</tr>
 
</table>

Комментарии:

1. width: 100; недопустимый CSS. Используйте width: 100px; или width: 100%;

2. width: 100; недопустимое значение. Вам не хватает единицы измерения (например px ). Но, кроме того, если вы хотите отображать изображения определенного размера, вам следует просто создать их такого размера, чтобы сэкономить пропускную способность для пользователя.

Ответ №1:

Прежде всего, width: 100; недопустимый CSS. Используйте width: 100px; или width: 100%;

Тем не менее, чтобы содержать и центрировать изображения внутри a <td> , используйте изображение как a background-image , затем добавьте width height к <td/> 

 td {
    width: 100px;
    height: 100px;
    background-position: center;
}  
 <table style="width:100%; text-align:center">
    <tr>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
    </tr>
    <tr>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
        <td style="background-image: url('https://placehold.it/500x500');" /></td>
    </tr>
</table>

Примечание; Я заменил ваши изображения для некоторых заполнителей.