如果图像尺寸小于容器 Div 尺寸，则上传图像并以平铺格式显示答案

【问题标题】：Upload image and show it in tile format if image size smaller then Container Div Size如果图像尺寸小于容器 Div 尺寸，则上传图像并以平铺格式显示
【发布时间】：2013-02-22 09:15:18
【问题描述】：

我正在创建一个网站。

我需要在其中创建一个页面。我需要实现这些功能：

用户可以上传图片。
上传后，他/她可以看到那张图片。
我有一个宽度为500px的固定区域，用户上传后可以看到他/她的图片。
如果用户上传小尺寸图片。该图像不会拉伸，它将使用平铺格式填充该区域。
就像我们的桌面背景。

请帮帮我。

【问题讨论】：

@spiny-norman 你介意解释一下你为什么回滚我的编辑吗？
@Spontifixus 我相信我回滚了将“功能”更改为“功能”并删除列表格式的编辑。而且，是别人发的。我感觉出了点问题。如果我不小心把你的更改也扔掉了，请原谅。也许你可以重做你的编辑？
@SpinyNorman：这是一个编号列表 - 所以我将重新添加列表格式，一切都应该没问题... ;)

标签： c# javascript asp.net file-upload

【解决方案1】：

对于 1.使用ajax文件上传控件（或）普通aspx文件上传控件多张照片添加 2.使用图像控制 3. 将该图像控件宽度设置为 500px 4.在图像控制中可以选择定位图像 5.您可以根据需要调整其大小

【讨论】：

【解决方案2】：

你可以像使用javascript一样..

width = 0;
while (width<500){ // 500 the max width
diva.innerHtml+='insert image' // code to append the image in the div
width+=insertimage.width // code to set the total width that has been used
}

你也可以为身高做 * 注意：- 以上代码仅用于说明目的，您需要更改它。这里我已经为你写了一个示例代码

<head>
<title></title>
<script language="javascript" type="text/javascript">
    function Button1_onclick() {
        var h = document.getElementById("Text1");
        var im = document.getElementById("Text3");
        var dimage = document.getElementById("div1");
        dimage.setAttribute("style", "width:" + h.value);
        width = 0;
        dimage.innerHTML = " ";
        while (width < h.value) {
            dimage.innerHTML += "<img alt=\"\"src = \"" + im.value + "\"/>";
            width += 100;
        }

    }
</script>
<style type="text/css">
    .style1
    {
        height: 23px;
    }
</style>

<table style="width:100%;">
    <tr>
        <td>
            Max Width</td>
        <td>
            <input id="Text1" type="text" value="600" /></td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            Max Height</td>
        <td>
            <input id="Text2" type="text" value="500" /></td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            Image Location</td>
        <td>
            <input id="Text3" type="text" 
                value="www.conflictprevention-ks.org/images/img.jpg" /></td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            <input id="Button1" type="button" value="Load Image" onclick="return Button1_onclick()" /></td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" class="style1">
            <div id="div1">
             </div>
        </td>
        <td class="style1">
            </td>
    </tr>
</table>

只需将代码保存为 html 文件，看看它是如何工作的。

【讨论】：