web-dev-qa-db-ja.com

異なるサイズの画像からグリッドを作成するにはどうすればよいですか？

行のすべての画像が同じ高さを共有し、各行が同じ幅を使用する画像のグリッドを作成しようとしています。

これをどのように行うことができ、どのライブラリが役立ちますか？

image grid

javascripthtmlcssgridphoto-gallery
16
serge

このタイプのグリッドは自分で作るのが難しいので、ホイールを再発明せずに、インターネット上のすばらしい人々によって作成されたすばらしいライブラリを使用する方がよいでしょう。

あなたが探しているものに最適なこのリンクをチェックアウトしてください->

  1. http://masonry.desandro.com/
  2. http://css-tricks.com/seamless-responsive-photo-grid/

また、このリンク http://www.jqueryscript.net/tags.php?/grid%20layout/ には、便利な画像グリッドビューライブラリがさまざまに用意されています。

CSSトリックリンクは、実際にはライブラリフリーの簡単な実装です。アイデアは、画像の幅を100％に設定し、スペースを列に分割することです。

以下は、前のリンクから抜粋したスニペットです。

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages
.snippet-result-code {
  height: 500px
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}
<section id="photos"></section>
15
Vishal Nair

CSSグリッドフレームワークはうまく機能します。詳細については、ウェブサイト CSS Tricks をご覧ください。これは、上記の画像で機能する例です。 （そしてこれが私の JSFiddle 結果です）。

/*grid container*/

 .container {

          display: grid;
          padding:60pt;
          grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;  
          /*adjust outer values if you want less padding on the sides, 
           in jsfiddle I used 5% */
          grid-template-rows: 10% 300pt 250pt 10%;
          grid-column-gap: 10px;
          grid-row-gap: 5px;

        }

    .container div img { width: 100%;
                         height: 100%;
                         }

/*image div classes*/

    .main_1 {
      grid-area: main_1;
      grid-column:2/5;
      grid-row: 2/3; 
    }

    .main_2 {

      grid-area: main_2;
      grid-column:5/8;
      grid-row: 2/3;
    }

    .main_3 {
      grid-area: main_3;
      grid-column:8/11;                                          
      grid-row: 2/3;
    }

    .main_4 {
      grid-area: main_1;
      grid-column:2/4;
      grid-row: 3/4;
    }

    .main_5 {
      grid-area: main_2;
      grid-column:4/7;
      grid-row: 3/4;
    }

    .main_6 {
      grid-area: main_3;
      grid-column:7/11;                                           
      grid-row: 3/4; 
    }
2
Programina