ГАЛЕРЕЯ ИЗОБРАЖЕНИЯ CSS GRID: Как изменить размер всех изображений до одинакового размера и сохранить одинаковое расстояние? - PullRequest
Новая
       22

ГАЛЕРЕЯ ИЗОБРАЖЕНИЯ CSS GRID: Как изменить размер всех изображений до одинакового размера и сохранить одинаковое расстояние?

0 голосов
/ 24 июня 2018

Просто пытаюсь создать простую галерею изображений размером 3 x 3 с использованием CSS-сетки.Я подумал, что использование контейнера со следующими стилями CSS позволит изменить их размер в равной степени: 

.portfolio {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px; 
  justify-content: center;
  padding: 10%;
}

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

Ответы [ 3 ]

0 голосов
/ 24 июня 2018

По умолчанию img не изменяют свой размер, чтобы приспособиться к размеру контейнера.

Вы можете получить этот результат с промежуточным div, содержащим изображения, и настройкой max-размеры к ним 

.portfolio {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px; 
}

.item img {
    max-height: 100%;
    max-width: 100%;
}
<div class="portfolio">
    <div class="item">
    <img src="https://i.stack.imgur.com/IXg7m.jpg"/>
    </div>
    <div class="item">
    <img src="https://i.stack.imgur.com/IXg7m.jpg"/>
    </div>
</div>
0 голосов
/ 06 ноября 2018

Это делает трюк для меня.Хотя для правильной работы изображения должны быть квадратными.

Каким-то странным, но он работает в Chrome, Firefox и Edge (IE не фанат).

Codepen 

ul {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, minmax(1px, 100%));
    padding-left: 0;
    list-style: none;
}

img {
  width: 100%;
}
<ul>
    <li><img src="https://via.placeholder.com/350x150" alt="image"></li>
    <li><img src="https://via.placeholder.com/300" alt="image"></li>
    <li><img src="https://via.placeholder.com/150x300" alt="image"></li>
    <li><img src="https://via.placeholder.com/147" alt="image"></li>
    <li><img src="https://via.placeholder.com/200" alt="image"></li>
    <li><img src="https://via.placeholder.com/150" alt="image"></li>
</ul>
0 голосов
/ 24 июня 2018

Я понимаю, что CSS Grid - это новый способ работы, и я ценю ваши усилия по созданию новых вещей.Прежде всего, я хотел бы предложить вам пройти этот бесплатный тренинг по CSS grid CSS Grid tutorial .Это даст вам базовое представление обо всем синтаксисе.

Во-вторых, как только вы ознакомитесь с понятиями, я думаю, this (хитрости CSS-сетки) будет лучшим руководством для вас, чтобы углубиться в него.

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .portfolio {
            display: grid;
            grid-template-rows: 150px 150px 150px;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20px;

            grid-template-areas: "img1 img2 img3 img4" "img5 img6 img7 img8" "img9 img10 img11 img12";
        }

        .image1 {
            grid-area: img1;
            text-align: center;
        }

        .image2 {
            grid-area: img2;
            text-align: center;
        }

        .image3 {
            grid-area: img3;
            text-align: center;
        }

        .image4 {
            grid-area: img4;
            text-align: center;
        }

        .image5 {
            grid-area: img5;
            text-align: center;
        }

        .image6 {
            grid-area: img6;
            text-align: center;
        }

        .image7 {
            grid-area: img7;
            text-align: center;
        }

        .image8 {
            grid-area: img8;
            text-align: center;
        }

        .image9 {
            grid-area: img9;
            text-align: center;
        }

        .image10 {
            grid-area: img10;
            text-align: center;
        }

        .image11 {
            grid-area: img11;
            text-align: center;
        }

        .image12 {
            grid-area: img12;
            text-align: center;
        }

        .fit {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="portfolio">

        <div class="image1">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image2">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image3">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image4">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image5">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image6">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image7">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image8">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image9">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image10">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image11">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image12">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>

    </div>

</body>

</html>

Теперь вы можете поэкспериментировать с ним, изменив размер строк или столбцов (что когда-либо требовалось для вашего варианта использования).Еще один момент, который я хотел бы добавить, вместо того, чтобы использовать align-items: center, если вы хотите поиграть с пробелами, вы всегда можете попробовать это с grid-template-areas, задав . . там, где это когда-либо потребуется.

Потрясающие возможности CSS-сетки.Просто попробуй.И надеюсь, что решение помогло.

...