【发布时间】：2021-05-27 20:58:37
【问题描述】：
我正在为 Uni 制作一个项目，我需要上传具有指定宽度和高度的图像供大家查看。它基本上相当于：http://www.milliondollarhomepage.com/。问题是我在 HTML 方面有这个：
<div id="canvas">
</div>
这是图片应该上传的地方，假设它的大小是 1000 x 1000。我应该在不改变尺寸的情况下放置每张图片。
const canvas=document.getElementById('canvas')
const btn = document.getElementById('submit-button');
const image_width=document.getElementById('image_width');
const image_height=document.getElementById('image_height');
btn.addEventListener('click', (event) => {
var x=document.createElement('img');
var color=document.getElementById('color');
if(color.value==='red')
{
x.src='red.png';
}
else if(color.value==='blue')
{
x.src='blue.png';
}
x.width=image_width.value;
x.height=image_height.value
event.preventDefault();
canvas.appendChild(x);
});
这是我使用的 Javascript，只是为了看看它是如何工作的。但是，当我们使用不同尺寸的图像时，例如，我们放置 3 个 20x20 并添加一个 20x40 并以 20x20 完成该行的其余部分，一旦我再添加一个 20x20，它将不会开始填充 20x40 左侧的可用空间，它将开始填充在 20x40 的右侧。 This is the result. 我希望红色填充蓝色左侧的黑色空间。红色=50x10 蓝色=50x20
【问题讨论】：
标签： javascript html css image