jQuery

【jQuery】レスポンシブの画像の高さを一致させるjQuery Mosaic

September 13, 2016
jQuery Mosaic plugin

jQuery Mosaicはレスポンシブの画像のアスペクト比を維持しながら、高さが一致するように他のコンテンツを構築するjQueryプラグイン。

Basic usage

<html>
<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.mosaic.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.mosaic.css" />
    ...
</head>
<body>
    ...

HTML

<div id="myMosaic">
    <img src="image1.jpg" width="400" height="350" />
    <img src="image2.jpg" width="320" height="200" />
    <img src="image3.jpg" width="870" height="420" />
    <img src="image4.jpg" width="442" height="922" />
    ...
</div>
<script>
    $('#myMosaic').Mosaic();
</script>

Options

  1. maxRowHeight
  2. refitOnResize
  3. refitOnResizeDelay
  4. defaultAspectRatio
  5. maxRowHeightPolicy
  6. highResImagesWidthThreshold
$('#myMosaic').Mosaic({
    maxRowHeight: 800,
    refitOnResize: true,
    refitOnResizeDelay: false,
    defaultAspectRatio: 0.5,
    maxRowHeightPolicy: 'crop',
    highResImagesWidthThreshold: 850
});

MITライセンス