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

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ライセンス

 
jQuery Mosaic plugin

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

  • LATEST
  • RELATED
  • POPULAR