はい、ASP.NET MVC でデータベース内の画像を一覧表示し、
jQuery で「隙間なし（masonry風）」のサムネイルレイアウトを実現するサンプルを作れます。
以下は 完全動作可能な最小構成例 です。
（画像は DB に varbinary(max) で保存されている想定）
1. モデル（ImageModel.cs）
public class ImageModel
{
public int Id { get; set; }
public byte[] ImageData { get; set; }
public string ContentType { get; set; }
}
2. コントローラ（GalleryController.cs）
using System.Linq;
using System.Web.Mvc;
public class GalleryController : Controller
{
private readonly ApplicationDbContext _db = new ApplicationDbContext();
// 一覧ページ
public ActionResult Index()
{
var images = _db.Images.ToList();
return View(images);
}
// 画像取得（<img src> 用）
public FileContentResult GetImage(int id)
{
var img = _db.Images.FirstOrDefault(i => i.Id == id);
if (img != null)
{
return File(img.ImageData, img.ContentType);
}
return null;
}
}
3. ビュー（Index.cshtml）
@model IEnumerable<ImageModel>
@{
ViewBag.Title = "画像ギャラリー";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.min.css" />
<style>
/* サムネイルの基本スタイル */
.grid {
margin: 0 auto;
}
.grid-item {
width: 200px;
margin: 0;
padding: 0;
}
.grid-item img {
display: block;
width: 100%;
height: auto;
}
</style>
<div class="grid">
@foreach (var img in Model)
{
<div class="grid-item">
<img src="@Url.Action("GetImage", "Gallery", new { id = img.Id })" alt="photo" />
</div>
}
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
$(window).on('load', function () {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 200,
gutter: 0, // 隙間なし
fitWidth: true
});
});
</script>
4. ポイント
- DBから画像を取得するために
GetImage アクションを <img src> に直接指定。 - 隙間なしレイアウトは jQuery + Masonry を使用。
gutter: 0 にすることで画像間の余白をゼロに。- 画像サイズは CSS で統一幅にして高さは自動調整。
- DB の
ImageData は byte[]、ContentType は "image/jpeg" などを保存。
もし CSSだけで隙間なしのサムネイル を作りたい場合は、
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0;
を使えば jQuery なしでも可能です。
必要であれば、このサンプルを CSS Grid版（jQuery不要） に書き換えたコードも作れますが、
Masonry の方が高さがバラバラな画像でもきれいに詰められます。
このあと、希望があれば CSS Grid版の隙間なしサムネイル表示 も提示できますが、
作りますか？
CSSだけで軽量に動きます。
Powered by Froala Editor