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

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

Я просматривал разные решения и часами пытался изменить размер таблицы или изображений, но изображение всегда ломалось.

Оригинал: Как заставить ячейки таблицы, содержащие изображения, изменять размер без торможения?

Фактический результат: Как заставить ячейки таблицы, содержащие изображения, изменять размер без торможения?

Я добавил приведенные ниже коды, а также загрузил коды и изображения на диск:

Ссылка на диск: https://drive.google.com/drive/folders/1rOmjAniDTHqtH1hxvfdRC1YmHRSJ6qmm?usp=sharing

HTML

    <html>
<head>
<title>Image</title>
<link rel = "stylesheet" href = "mystyle.css">
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
</head>
<body bgcolor = "#FFFFFF" leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0">
<!-- Save for Web Slices (20200123_170249.jpg) -->
<table id = "Table_01" class = "center" width = "1001" height = "564" border = "0" cellpadding = "0" cellspacing = "0">
    <tr>
        <td>
            <img src = "images/20200123_170249_01.png" width = "413" height = "68" alt = ""></td>
        <td colspan = "2" rowspan = "2">
            <img src = "images/20200123_170249_02.png" width = "251" height = "141" alt = ""></td>
        <td rowspan = "2">
            <img src = "images/20200123_170249_03.png" width = "169" height = "141" alt = ""></td>
        <td rowspan = "2">
            <img src = "images/20200123_170249_04.png" width = "167" height = "141" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "1" height = "68" alt = ""></td>
    </tr>
    <tr>
        <td rowspan = "2">
            <img src = "images/20200123_170249_05.png" width = "413" height = "214" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "1" height = "73" alt = ""></td>
    </tr>
    <tr>
        <td>
            <img src = "images/20200123_170249_06.png" width = "87" height = "141" alt = ""></td>
        <td colspan = "2">
            <img src = "images/20200123_170249_07.png" width = "333" height = "141" alt = ""></td>
        <td>
            <img src = "images/20200123_170249_08.png" width = "167" height = "141" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "1" height = "141" alt = ""></td>
    </tr>
    <tr>
        <td>
            <img src = "images/20200123_170249_09.png" width = "413" height = "140" alt = ""></td>
        <td colspan = "2">
            <img src = "images/20200123_170249_10.png" width = "251" height = "140" alt = ""></td>
        <td>
            <img src = "images/20200123_170249_11.png" width = "169" height = "140" alt = ""></td>
        <td>
            <img src = "images/20200123_170249_12.png" width = "167" height = "140" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "1" height = "140" alt = ""></td>
    </tr>
    <tr>
        <td>
            <img src = "images/20200123_170249_13.png" width = "413" height = "141" alt = ""></td>
        <td>
            <img src = "images/20200123_170249_14.png" width = "87" height = "141" alt = ""></td>
        <td colspan = "2">
            <img src = "images/20200123_170249_15.png" width = "333" height = "141" alt = ""></td>
        <td>
            <img src = "images/20200123_170249_16.png" width = "167" height = "141" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "1" height = "141" alt = ""></td>
    </tr>
    <tr>
        <td>
            <img src = "images/spacer.gif" width = "413" height = "1" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "87" height = "1" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "164" height = "1" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "169" height = "1" alt = ""></td>
        <td>
            <img src = "images/spacer.gif" width = "167" height = "1" alt = ""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

CSS

    <style>

.center {
  margin-left: auto;
  margin-right: auto;
}

</style>

Заранее спасибо!

не похоже на табличные данные для меня. Таким образом, либо CSS-Grid, либо Flexbox следует подать в суд.

tacoshy 16.05.2022 01:15

Благодарю вас! Я никогда раньше не использовал CSS-Grid или Flexbox. Я только что прочитал, что изменение размера не применимо к таблицам. Означает ли это, что мне придется удалить какой-либо элемент таблицы и вместо этого использовать div?

Username 16.05.2022 02:45

ну, вы должны использовать другие элементы этой таблицы, поскольку это не таблица. Преимущество CSS-Grid будет заключаться в том, что вам нужен только контейнер и включать все изображения непосредственно в контейнер: <div class = "container"><img><img><img> ... </div>. Then you apply .container { display: grid }`, тогда вы можете выровнять изображения по контейнеру, используя сетку.

tacoshy 16.05.2022 02:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как я уже сказал в комментариях, будет проще всего объединить все изображения в один div и использовать CSS-Grid в контейнере. У вас есть общая ширина 1001px для покрытия, поэтому создайте сетку из 1001 столбца с grid-template-columns: repeat(1001, 1fr);

Затем определите положение сетки изображений следующим образом (я только что использовал первые 8 изображений для демонстрации):

.container {
  display: grid;
  grid-template-columns: repeat(1001, 1fr);
}

img {
  width: 100%;
}

img:nth-child(1) {
  grid-column: 1 / 414;
  grid-row: 1 / 69;
}

img:nth-child(2) {
  grid-column: 414 / 665;
  grid-row: 1 / 142;
}

img:nth-child(3) {
  grid-column: 665 / 834;
  grid-row: 1 / 142;
}

img:nth-child(4) {
  grid-column: 834 / 1002;
  grid-row: 1 / 142;
}

img:nth-child(5) {
  grid-column: 1 / 414;
  grid-row: 69 / 283;
}

img:nth-child(6) {
  grid-column: 414 / 501;
  grid-row: 142 / 283;
}

img:nth-child(7) {
  grid-column: 501 / 834;
  grid-row: 142 / 283;
}

img:nth-child(8) {
  grid-column: 834 / 1002;
  grid-row: 142 / 283;
}
<div class = "container">
  <img src = "https://drive.google.com/uc?id=1xYmDtoApToQLcDttXU2VAK5kxZrcgWG6">
  <img src = "https://drive.google.com/uc?id=10aRjEU_h46dvz6M8jAWbZDSXM5Ezl-t5">
  <img src = "https://drive.google.com/uc?id=1A6Rjr1sEK0XEIrSdfoe6asVSHMbvX3F-">
  <img src = "https://drive.google.com/uc?id=1VB8EaN-U789wBXvHtuXFEttTu7esk1WZ">
  <img src = "https://drive.google.com/uc?id=1u3a4154gk4lNmzdCu3IEpgKSHd24ZAOD">
  <img src = "https://drive.google.com/uc?id=1b7_1DGc_x7lctn4J6aFoQ4x_uXMeZlRX">
  <img src = "https://drive.google.com/uc?id=1KEoi_cIAnK1dxtOxW3aK1Dtc5R87Ej0k">
  <img src = "https://drive.google.com/uc?id=153dLnHVKVFafuEXTdvQx9CO8R7Oxy6sw">
</div>

Большое спасибо за объяснение и демонстрацию! Это было очень полезно для меня. Я прочитаю больше об этой теме вместе с кодами, которые вы предоставили. Хорошего дня, Такоши.

Username 17.05.2022 00:10

Другие вопросы по теме