收缩放大响应性布局HTML5_Html_Css

收缩放大响应性布局HTML5

html css

收缩放大响应性布局HTML5,html,css,Html,Css,我有一个具有以下响应定义的HTML文件： <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body> <img class="img" src="https://stmed.net/sites/default/files/cube-wallpapers-25187-9698686

我有一个具有以下响应定义的HTML文件：

<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
  <img class="img"
    src="https://stmed.net/sites/default/files/cube-wallpapers-25187-9698686.jpg" />
</body>
</html>

完整的工作示例：

在我的场景中，用户无法将缩放应用到我的页面，这很好

但是，我想允许用户仅在我的图像标签中使用“收缩缩放”

为了清楚起见，我希望图像框的大小保持不变，但图像得到缩放。当然，图像的一部分会被框隐藏（就像自动溢出一样）

只有HTML和CSS（最好没有js）我能做到吗？

没有Javascript这是不可能的。即使使用Javascript，也很难弄明白怎么做！如果你在谷歌上搜索“pinch zoom mdn”，它会带你到哪个地方尝试使用

pointerdown

、

pointermove

和

pointerup

在Javascript中实现pinch缩放。他们的例子是，如果你玩它，你会发现它

问题是，它试图实现自动缩放，而不是让浏览器/操作系统正确地执行，并将缩放结果发送到网页，这显然是明智的做法

最后，我根本找不到任何关于人们这样做的答案，所以我看了一下谷歌地图是如何做到的——他们只是简单地使用了

事实证明，当浏览器检测到两个手指平移时，它们会将其作为

wheel

事件发送（使用

deltaX

和

deltaY

）。如果他们检测到收缩变焦，他们会发送一个

wheel

事件和

event.ctrlKey

和

deltaY

集

这里有一个例子（我知道这并不是你想要的，但如果我问一个不同的问题，它将作为这个问题的副本关闭，对不起）

设x=250；
设y=250；
设s=10；
函数重画（）{
const c=document.getElementById（“can”）；
const ctx=c.getContext（“2d”）；
ctx.fillStyle='灰色'；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.fillStyle='红色'；
ctx.fillRect（x-s，y-s，2*s，2*s）；
}
函数init（）{
const c=document.getElementById（“can”）；
c、 addEventListener（“控制盘”（事件）=>{
//preventDefault（）是停止浏览器缩放所必需的。
event.preventDefault（）；
if（event.ctrlKey）{
s-=event.deltaY；
s=数学最小值（数学最大值（s，5），100）；
}否则{
x+=event.deltaX；
y+=event.deltaY；
x=数学最小值（数学最大值（x，10），490）；
y=数学最小值（数学最大值（y，10），490）；
}
重画（）；
});
重画（）；
}
init（）
它必须是HTML吗？我想你必须使用一点Javascript和CSSYE，欢迎使用CSS，我编辑了它以使其更清晰。我担心它不可能只处理html和CSS。您将需要Javascript。如果你还感兴趣，我可以给你推荐一个。是的，我担心js是唯一的方法。是的，我担心js是唯一的方法，为了讨论和让问题对其他人有价值，如果你用js发布答案，我会接受。
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column

}
.img {
  width: 80vw;
  margin: 10px auto;
}