如何在另一个图像上添加图像并以网格方式显示？

Question

我有一个更大的图像[A4尺寸]，我有一个小图像[说atm卡的大小]，我想把所有的图像[可能是5-6图像]以gridview方式显示在大图像中我的下图。

我的代码看起来像这样......但是这只添加了一行图像。

var bitmap = new Bitmap(884, 1020);
        int k = 33, j = 33;
        for (int i = 1; i < 11;i++ )
        {

            using (var canvas = Graphics.FromImage(bitmap))
            {
                canvas.InterpolationMode = InterpolationMode.HighQualityBicubic;

                canvas.DrawImage(bmp, new Rectangle(k, j, bmp.Width, bmp.Height), new Rectangle(10, 10, bmp.Width, bmp.Height), GraphicsUnit.Pixel);
                canvas.Save();

                canvas.DrawImage(bmp, new Rectangle(k+460, j, bmp.Width, bmp.Height), new Rectangle(10, 10, bmp.Width, bmp.Height), GraphicsUnit.Pixel);
                canvas.Save();
            }
        }
        bitmap.Save(@"c:\LargePic.png");
        BigPic.Image = bitmap as Image;

Answer 1

选中此fiddle

<div id="GridViewContainer">
    <div class="grids"><img src="http://kristamoore.com/wp-content/uploads/2013/06/yes-man1.jpg" /></div>
        <div class="grids"><img src="http://kristamoore.com/wp-content/uploads/2013/06/yes-man1.jpg" /></div>
        <div class="grids"><img src="http://kristamoore.com/wp-content/uploads/2013/06/yes-man1.jpg" /></div>
        <div class="grids"><img src="http://kristamoore.com/wp-content/uploads/2013/06/yes-man1.jpg" /></div>
        <div class="grids"><img src="http://kristamoore.com/wp-content/uploads/2013/06/yes-man1.jpg" /></div>
</div>

CSS

#GridViewContainer{
    position:absolute;
    width:500px;
    height:500px;
    background:cyan;
    overflow:hidden;
}
#GridViewContainer div{
    width:35%;
    height:35%;
    position:relative;
    float:left;
    background:green;
}


.grids{

    margin-left:10%;
    margin-top:10%;


}
.grids img{
    width:100%;
    height:100%;

}

Answer 2

我建议您使用ListView代替GridView 将您的图片添加到ListView并将其显示为缩略图或图库 见Code Project Example！