私はメイクアップアーティストのサイトで作業していました。このような画像レイアウトを作りたいと思っていました。http://www.jasoncgriffin.com/photos/コンテナの形状を維持しながら、異なるサイズの画像を含むコンテナを合わせるにはどうすればよいですか？
どうすればいいですか？私はグーグルで調査し、その結果を得るために多くの研究をしましたが、画像そのものの上にバックグラウンドイメージをハッキングするために解決しました。
(function ($) {
'use strict';
\t $(window).load(function(){
\t \t $('.masonry').masonry({
\t \t \t columnWidth: '.grid-sizer',
\t \t \t gutter: '.gutter-sizer',
\t \t \t itemSelector: '.item'
\t \t });
\t });
}(jQuery));* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: black;
}
@media (max-width: 480px) {
.masonry {
margin: 3% 0;
}
.masonry .grid-sizer {
width: 48.5%;
}
.masonry .gutter-sizer {
width: 3%;
}
.masonry .item {
width: 48.5%;
margin-bottom: 3%;
}
.masonry .item img {
width: 100%;
}
}
@media only screen and (max-width: xxspx) {
.masonry {
margin: 3% 0;
}
.masonry .grid-sizer {
width: 48.5%;
}
.masonry .gutter-sizer {
width: 3%;
}
.masonry .item {
width: 48.5%;
margin-bottom: 3%;
}
.masonry .item img {
width: 100%;
}
}
@media (min-width: 481px) and (max-width: 767px) {
.masonry {
margin: 2.25% 0;
}
.masonry .grid-sizer {
width: 31.8333333333%;
}
.masonry .gutter-sizer {
width: 2.25%;
}
.masonry .item {
width: 31.8333333333%;
margin-bottom: 2.25%;
}
.masonry .item img {
width: 100%;
}
}
@media (min-width: 768px) {
.masonry {
margin: 2% 0;
}
.masonry .grid-sizer {
width: 23.5%;
}
.masonry .gutter-sizer {
width: 2%;
}
.masonry .item {
width: 23.5%;
margin-bottom: 2%;
}
.masonry .item img {
width: 100%;
}
}
@media (min-width: 992px) {
.masonry {
margin: 1.875% 0;
}
.masonry .grid-sizer {
width: 18.5%;
}
.masonry .gutter-sizer {
width: 1.875%;
}
.masonry .item {
width: 18.5%;
margin-bottom: 1.875%;
}
.masonry .item img {
width: 100%;
}
}
@media (min-width: 1200px) {
.masonry {
margin: 1.8% 0;
}
.masonry .grid-sizer {
width: 15.1666666667%;
}
.masonry .gutter-sizer {
width: 1.8%;
}
.masonry .item {
width: 15.1666666667%;
margin-bottom: 1.8%;
}
.masonry .item img {
width: 100%;
}
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="masonry">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item">
<img src="http://placehold.it/200x170" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x180" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x190" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x210" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x170" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x180" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x190" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x210" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x170" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x180" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x190" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x210" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x170" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x180" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x190" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x210" alt="" />
</div>
</div>チェックhere
私が何をしたいことは石積みのレイアウトだと思います。あなたはまともなチュートリアルを見つける必要があります – sol
ようこそスタックオーバーフロー！ Stack Overflowに関する[** How to to ask **]（http://stackoverflow.com/help/how-to-ask）の質問と、どのような種類の質問[**を聞くことができます**]（http：どのようなタイプ[**避けてください。**]（http://stackoverflow.com/help/dont-ask） –
この質問は広すぎる、意見に基づいているディスカッションが必要なので、スタックオーバーフローに関するトピックはありません。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –