HTML+；CSS：调整包含多个图像的容器的大小（像素化）_Css_Image_Html

HTML+；CSS：调整包含多个图像的容器的大小（像素化）

css image html

HTML+；CSS：调整包含多个图像的容器的大小（像素化）,css,image,html,Css,Image,Html,我正在尝试用html构建一个简单的像素艺术游戏其基本思想是制作一个固定大小的div，在其中我以像素坐标放置图像。我想保留单独的img标签，这样我就可以轻松地处理鼠标事件（点击）。我已经准备好了： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

我正在尝试用html构建一个简单的像素艺术游戏

其基本思想是制作一个固定大小的div，在其中我以像素坐标放置图像。我想保留单独的img标签，这样我就可以轻松地处理鼠标事件（点击）。我已经准备好了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.game_area {
    position:relative;
}
</style>
</head>
<body>
    <div class="game_area" style="width:320px;height:160px;" >
        <img src="field_base.png" style="position:absolute;left:0px;top:0px;" />
        <img src="field_base.png" style="position:absolute;left:16px;top:8px;" />
    </div>
</body>
</html>


.游戏区{
位置：相对位置；
}

这只是一个非常基本的测试。“field_base.png”是大小为32x16 px的示例图像：

很好

现在我想把整个东西放大到更好的可视性，但我想保留像素的视觉效果。对于一个简单的图像，我找到了以下解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.pixelart {
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}
</style>
</head>
<body>
    <img src="example.png" width="75%" class="pixelart" />
</body>
</html>


.像素艺术{
图像渲染：-moz crisp Edge；/*Firefox*/
图像渲染：-o-crisp-edges；/*Opera*/
图像呈现：-webkit优化对比度；/*webkit（非标准命名）*/
图像渲染：清晰的边缘；
-ms插值模式：最近邻；/*IE（非标准属性）*/
}

example.png是一个像素艺术图像，大小为168 x 97。选择你喜欢的人

这也很好

我现在的问题是：我能把两者结合起来吗？我是否可以在上面的示例中“缩放”我的div容器，例如，75%的页面宽度，但保留图像的像素内容和基于像素的坐标

或者我必须使用canvas元素并艰难地进行鼠标交互吗？

您必须自己尝试，因为我们没有足够的代码来实际测试任何东西。您使用的是可拖动类型库还是什么？事实上，我现在开始使用的代码比您预期的要简单数十亿倍。我在问题中显示的代码几乎已经完成！我在中编辑了其余部分。对不起，我的意思是验证你的像素贴图难题，你可能需要反复尝试才能看到你是否得到了你需要的结果。我不完全确定到底是什么依赖于那些保持不变的坐标，因此我无法进一步推测：（整个想法是为了重新创造旧式游戏的感觉。这就是为什么我从一块棋盘的32x16px磁砖开始（我的帖子中的图像）。html示例1将其中两个Iso字段并排放置（使用像素偏移量16x8）。由于图像是一个透明的png，两块瓷砖完全贴合在一起。我将使用一组这样的图像来拼接整个游戏板。整个游戏板的大小约为320x240px。我想缩放整个图像，以适合我网站的某个区域。--我很想做一些跟踪和错误，但我不知道去哪里开始