БЛОГ НА HUSL


Как сделать высоту картини равной ее динамической ширине?

Автор вопроса: MrShandy

На сайте выводится сетка картинок из папки uploads. Беда заключается в том, что некоторые картинки имеют большую высоту и ломают сетку. Хочу сделать высоту фото равной ширине и что бы она изменялась динамически(что бы был квадрат). введите сюда описание изображения

<head>
  <style>
    @import url("http://v70551da.beget.tech/main.css");
  </style>
</head>

<body>
  <h1 style="text-align: center;">
    <font face="verdana" style="font-weight: normal;">Хранилище фотографий Shandy</font>
  </h1>
  <h1 style="text-align: left;">
    <font face="verdana" style="font-weight: normal;">Картинки:</font>
  </h1>
  <div>
    <?php
        $dir = './uploads/'; // Папка с изображениями
        $cols = 6; // Количество столбцов в будущей таблице с картинками
        $files = scandir($dir); // Берём всё содержимое директории
        echo "<table>"; // Начинаем таблицу
        $k = 0; // Вспомогательный счётчик для перехода на новые строки
        for ($i = 0; $i < count($files); $i++) { // Перебираем все файлы
            if (($files[$i] != ".") && ($files[$i] != "..")) { // Текущий каталог и родительский пропускаем
                if ($k % $cols == 0) echo "<tr>"; // Добавляем новую строку
                    echo "<td width='16%'>"; // Начинаем столбец
                    $path = $dir.$files[$i]; // Получаем путь к картинке
                    echo "<a href='$path'>"; // Делаем ссылку на картинку
                    echo "<img src='$path' alt='' />"; // Вывод превью картинки
                    echo "</a>"; // Закрываем ссылку
                    //echo "<a href=unlink$path>Удалить</a>"
                    echo "</td>"; // Закрываем столбец
                    /* Закрываем строку, если необходимое количество было выведено, либо данная итерация последняя */
                    if ((($k + 1) % $cols == 0) || (($i + 1) == count($files))) echo "</tr>";
                    $k++; // Увеличиваем вспомогательный счётчик
                }
            }
        echo "</table>"; // Закрываем таблицу
    ?>
  </div>
  <br />
</body>


Источник

Ответы (1 шт):

Автор решения: Daniil Loban

Попробуйте использовать vw для размера ячеек td и object-fit=cover для изображений со 100% ширины и высоты

<p>Вот две картинки разных размеров (ниже таблица с ними)</p>
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" width="45%" style="display: inline-block">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" width="45%" style="display: inline-block">
<p>Таблица</p>
<table>
<tr>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
</tr>

<tr >
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: cover;">
</td>
</tr>

</table>

<p>Еще одна таблица</p>
<table>
<tr>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
</tr>

<tr >
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://image.freepik.com/free-psd/fire-logo_253059-60.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
<td style="height:16vw; width:16vw;">
<img src="https://img.freepik.com/free-photo/cute-jack-russell-blue-costume-sitting-sand-beach_181624-26074.jpg" height="100%" width="100%" style="object-fit: contain;">
</td>
</tr>

</table>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.