Разверните ряды картинок, чтобы они поместились в доступном пространстве - PullRequest
Новая
       12

Разверните ряды картинок, чтобы они поместились в доступном пространстве

0 голосов
/ 06 ноября 2018

Я пытаюсь создать галерею изображений с помощью CSS, организованную следующим образом:

Я загружаю каждое изображение папки, используя PHP, и создаю элементы, которые я называю строками, содержащими одинаковое количество картинок (в моем случае 4, выровненные по вертикали). Эти ряды выровнены по горизонтали. Я хотел бы, чтобы эти строки / столбцы корректировали свою ширину до тех пор, пока они не займут все доступное пространство по вертикали, поэтому, если у меня есть 4 вертикальных изображения, строка кажется более тонкой, а если у меня есть 4 изображения в альбомном формате, строка становится шире по горизонтали. Смотрите иллюстрацию:

Прямо сейчас у меня просто что-то вроде этого:

Если строк слишком много, я просто делаю горизонтальную полосу прокрутки вправо.

Мой HTML-код выглядит следующим образом: 

<div class="gallery">
    <div class="row">
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
    </div>
    <!-- other rows -->
</div>

И мой CSS следующий: 

body {
background-color: #dddddd;
}

.gallery {
    width: 100%;
    overflow: auto;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.row {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: stretch;
    justify-content: space-around;
}

.frame {
    margin: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);
    -webkit-transition: box-shadow;
    transition: all 0.5s ease;
}

.frame:hover {
    box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);
}

.gallery-img {
    -webkit-transition: transform;
    transition: all 0.5s ease;
    transform: scale(1);
    position: relative;
    z-index: -1;
}

.frame:hover .gallery-img {
    transform: scale(1.1);  
}

Я не знаю, будет ли flex-grow решением здесь. Я читал о свойствах auto-fit или auto-fill, но я не уверен, как и где это использовать. Я надеюсь, что это не было ответа где-то еще, но мне не удалось найти аналогичную тему. Дело в том, что мне нужно сохранять соотношение изображений, а не просто заполнять пустое пространство.

Заранее благодарю за помощь!

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Вы можете использовать Javascript, чтобы получить высоту изображений после их загрузки, а затем вычислить, какую долю окна просмотра должен занимать каждый элемент .frame.

Смотрите демонстрацию ниже с документацией в комментариях: 

window.addEventListener("load", () => {
  const rows = document.querySelectorAll(".row");

for(let row of rows) {
  const frames = row.querySelectorAll(".frame");
  const imgs = row.querySelectorAll("img");
  
  // calculate the sum of heights of all the img elements in a row
  const totalHeight = Array.prototype.reduce.call(imgs, (a, img) => Number(img.naturalHeight) + a, 0);
  
  // sets the height of each frame 
  for( let frame of frames) {
    let imgOfFrame = frame.querySelector("img");
    let fractionForFrame = imgOfFrame.naturalHeight / totalHeight * 100;
    
    
    frame.style.height = fractionForFrame + "vh";
  }
}
});
body {
margin: 0;
padding: 0;
}

.gallery {
  display: flex;
  overflow-x: scroll; /* make the the gallery scrollable*/
}

.row {
  margin-right: 20px;
  flex-shrink: 0; /* make sure the flex items do not shrink*/
}

.row:last-child {
  margin-right: 0;
}

.frame {
  box-sizing: border-box;
  padding: 10px 0; /*creates vertical spacing between images*/
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /*keeps the image from being distorted if the aspect ratio is off*/
}
<div class="gallery">
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/200x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x50" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x300" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x100" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400x800" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/200x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x100" alt=""></div>
  </div>
   <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/500x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x300" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x100" alt=""></div>
  </div>
  
</div>
0 голосов
/ 06 ноября 2018

Пожалуйста, смотрите комментарии в коде.

HTML: 

<head>
  <meta name="viewport" content="width=device-width" height="device-height" user-scalable="yes" initial-scale="1.0"> <!-- added -->
</head>

<div class="gallery">
    <div class="row rowone">
        <div class="frame">
            <img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">
        </div>
        <div class="frame">
            <img src="http://1.bp.blogspot.com/-Pv3JbHcv59A/UFN5FxU8MfI/AAAAAAAAAd0/hWYnQlt3hYA/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">
        </div>
         <div class="frame">
            <img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">
        </div>
        <div class="frame">
            <img src="http://1.bp.blogspot.com/-Pv3JbHcv59A/UFN5FxU8MfI/AAAAAAAAAd0/hWYnQlt3hYA/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">
        </div>
    </div>
    <div class="row rowtwo">
        <div class="frame">
            <img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">
        </div>
        <div class="frame">
            <img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" class="gallery-img">
        </div>
        <div class="frame">
            <img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">
        </div>
        <div class="frame">
            <img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" class="gallery-img">
        </div>
    </div>
    <!-- other rows -->
</div>

CSS: 

body {
   background-color: #dddddd;
}

.gallery {
    width: 100%;
    overflow: auto;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.row {
    display: flex;
    /* flex-direction: column; -- removed */
    height: 100%;
    /* flex-wrap: nowrap; -- removed */
    align-content: stretch;
    /* align-items: stretch; -- removed */
    /* justify-content: space-around; -- removed */
    flex-wrap:wrap; /* added */
    height:auto; /* added */
}

/* added to work with narrowest image in each row */
.rowone {
  width:388px;
}

.rowtwo {
  width:340px;
}

/* end - added to work with narrowest image in row */

.frame {
    margin: 2px;
    overflow: hidden;
    align-self:stretch; /* added - "align-self" works in ie */
    flex:1 1 auto; /* added */
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);
    -webkit-transition: box-shadow;
    transition: all 0.5s ease;
 }

.frame:hover {
    box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);
}

.gallery-img {
    -webkit-transition: transform;
    transition: all 0.5s ease;
    transform: scale(1);
    position: relative;
    z-index: -1;
    height:100%; /* added */
}

.frame:hover .gallery-img {
    transform: scale(1.1);  
}

ссылка: полная высота сетки столбцов - https://codepen.io/carolmckayau/pen/NEqzpO

...