Как создать миниатюру изображения в таблице - PullRequest
Новая
       0

Как создать миниатюру изображения в таблице

0 голосов
/ 29 декабря 2018

У меня есть несколько изображений, которые я хочу показать в таблице, но в уменьшенной версии.Примерно так:

Click to open the example image

На изображении выше вы можете видеть, что изображения имеют разные размеры, некоторые выше, чем другие, вот что я пытаюсь сделать, маленькие изображенияно сохраняя формат ориентации.

Это мой HTML: 

<!DOCTYPE html>
<html>
<head>
	<title>Images</title>
</head>
<body>

<table>
	<thead>
		<tr style="border: 1px solid black;">
			<th style="border: 1px solid black;">IMAGE</th>
			<th style="border: 1px solid black;">IMAGE</th>
			<th style="border: 1px solid black;">IMAGE</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src='https://i.ibb.co/6DsDQQ3/logo.png' width="50%" height="100%" style="margin-left: 50px;"></div></td>

			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src="https://i.ibb.co/0n2zfJg/product-features.png" width="50%" height="100%" style="margin-left: 50px;"></div></td>

			<td style="width: 200px !important; height: 200px !important; border: 1px solid black;"><div style="width: auto; height: auto;"><img src="https://i.ibb.co/6BRPLvs/intro-bg.jpg" width="50%" height="100%" style="margin-left: 50px;"></div></td>

		</tr>
	</tbody>
</table>

</body>
</html>

Как получить уменьшенные изображения?

ОБНОВЛЕНИЕ: другой пример изображения: другой пример изображения . Этот снимок показывает некоторые изображения, которыеВ папке на моем ноутбуке, как вы видите, изображение № 4 больше, чем другие, потому что исходное изображение выше, чем другие.Это именно то, чего я хочу, показывать картинки поменьше, но с уважением относиться к таким вещам

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

установите только одно свойство, выберите все изображения одинаковой высоты или одинаковой ширины, например для одинаковой ширины: 

  <tr>
            <td style="border: 1px solid black;"><img src='https://i.ibb.co/6DsDQQ3/logo.png'  style="height: 200px;"></td>

            <td style="border: 1px solid black;"><img src="https://i.ibb.co/0n2zfJg/product-features.png"  style="height: 200px;"></td>

            <td style="border: 1px solid black;"><img src="https://i.ibb.co/6BRPLvs/intro-bg.jpg"  style="height: 200px;"></td>

        </tr>

кстати, это не изменит время загрузки, еслиВы хотите сократить время загрузки, вам нужен какой-то язык бэкэнда (PHP?), чтобы вернуть на лету уменьшенное изображение.

0 голосов
/ 29 декабря 2018

Похоже, в вашем коде выше 100% высоты и фиксированной ширины.Поменяйте местами эти свойства.Дайте вашим изображениям фиксированную высоту и установите ширину 100%.

.thumbnail img {
    height:250px;
    width:100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...