スタイルシートで画像を切り取るメモ



元画像 (横640px 縦1000px)



横640px 縦1000pxの画像を 横4等分 縦5等分にしてみる。



プログラム


<?php

// 画像ファイルパス内部
$imgPath 'imgMapping/mutron.jpg';

// パス
$imgSrc 'http://akamako.com/imgMapping/mutron.jpg';

// 横 等分
$perWidth 4;

// 縦 等分
$perHeight 5;

// サイズ
list($width$height$type$attr) = getimagesize($imgPath);

?>
<table>
<?php for ($heightI=0;$heightI<$perHeight;$heightI++) { ?>
    <tr>
<?php     for ($widthI=0;$widthI<$perWidth;$widthI++) { ?>
        <td style="margin:0px;">
            <div style="margin:1px;width:<?php echo $width/$perWidth;?>px;height:<?php echo $height/$perHeight;?>px;background-image: url('<?php echo $imgSrc;?>');background-position: -<?php echo ($widthI * ($width/$perWidth));?>px -<?php echo ($heightI * ($height/$perHeight))?>px;"></div>
        </td>
<?php     ?>
    </tr>
<?php ?>
</table>